reactjs - 使用 mapStateToProps (react-redux) 与 store.getState() 时 this.props 中收到的值的差异

Question

我在我的代码库中遇到了一个问题，所以我制作了一个示例代码来演示这个问题。

代码和框代码的链接

应用程序.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);

两个 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;
    }
}

来自 react-redux 文档

mapStateToProps 函数的第一个参数是整个 Redux 存储状态（调用 store.getState() 返回的值相同）。

有人可以解释为什么两个控制台存在差异。我已经调试并发现从reducer mapStateToProps 返回后被调用并且它获取状态的更新值那么为什么this.props.appData 在handleChange 函数中不是最新的。

我相信它可能与脏状态有关，但如果它适用于函数中的 getState() 它也应该适用于 this.props.appData。