Difference in the value received in this.props when using mapStateToProps (react-redux) vs store.getState()

Question

I am facing an issue in my code base so I have made a sample code to demonstrate the issue.

link for the codesandbox code

App.js

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { handleDataInit, handlePageChange, handleDataAdded } from './appDataAction';


import First from './First';
import Second from './Second';

import { reduxStore } from "./store";


class App extends Component {
  handleChange = (pageNumber, pageTitle) => {
    let data = {
      val1: "val1",
      val2: "val2",
      val3: "val3"
    }

    this.props.handleDataAdded(data);

    console.log("app Data", this.props.appData);
    console.log('app data in redux store ', reduxStore.getState().appData);

    this.props.handlePageChange({ pageNumber, pageTitle });
  }

  render() {
    return (
      <div>

        <button onClick={() => this.handleChange(1, "first_page")}>1</button>
        <button onClick={() => this.handleChange(2, "second_page")}>2</button>
        {
          this.props.appData.pageNumber === 1 ?
            <First />
            :
            <Second />
        }
      </div>
    );
  }
}


const mapStateToProps = (state) => {
  console.log('map state to props state value is ', state);
  return ({
    appData: state && state.appData
  })
}

const mapDispatchToProps = (dispatch) => {
  return ({
    handleDataInit: (data) => dispatch(handleDataInit(data)),
    handlePageChange: (newPage) => dispatch(handlePageChange(newPage)),
    handleDataAdded: (data) => dispatch(handleDataAdded(data))
  })
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

screenshot for the two console.log browser console log:

appDataAction.js

export const handleDataInit = (data) => {
    return ({
        type: "data_init",
        payload: data
    });
}

export const handlePageChange = (newPage) => {
    return ({
        type: "page_change",
        payload: newPage
    });
}

export const handleDataAdded = (data) => {
    return ({
        type: "data_added",
        payload: data
    });
}

appDataReducer.js

const initialState = {
    pageNumber: 1,
    pageTitle: "first_page",
}

export const appDataReducer = (state = initialState, action) => {
    switch (action.type) {
        case "data_init":
            if (Object.keys(state).length > 2) {
                return state
            }
            else {
                let newState = Object.assign({}, state, action.payload);
                // console.log("new state in init ", newState);
                return newState;
            }

        case "page_change":
            // console.log('action.payload', action.payload);
            let newState2 = {
                ...state,
                pageNumber: action.payload.pageNumber,
                pageTitle: action.payload.pageTitle
            }
            // console.log('new state is ', newState2);
            return newState2;

        case "data_added":
            let newState3 = Object.assign({}, state, action.payload);
            // console.log("new state in data added ", newState3);
            return newState3;

        default:
            return state;
    }
}

From react-redux documentation

The first argument to a mapStateToProps function is the entire Redux store state (the same value returned by a call to store.getState()).

can somebody explain why there is difference in the two console's. I have debugged and found out that after return from reducer mapStateToProps is called and it gets the updated value of state then why is this.props.appData is not up to date in the handleChange function.

I believe it could be something related to dirty state but if it is proper for getState() in the function it should be for this.props.appData too.