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

问题描述

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

代码和框的链接 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);

两个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({},action.payload);
            // console.log("new state in data added ",newState3);
            return newState3;

        default:
            return state;
    }
}

来自 react-redux 文档

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）