如何解决使用 mapStateToProps (react-redux) 与 store.getState() 时 this.props 中收到的值的差异
我在我的代码库中遇到了一个问题,所以我制作了一个示例代码来演示这个问题。
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);
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 文档
mapStatetoProps 函数的第一个参数是整个 Redux 存储状态(调用 store.getState() 返回的值相同)。
有人可以解释为什么两个控制台存在差异。 我已经调试并发现从reducer mapStatetoProps 返回后被调用并获取状态的更新值 那么为什么this.props.appData在handleChange函数中不是最新的。
我相信它可能与脏状态有关,但如果它适用于函数中的 getState(),它也应该适用于 this.props.appData。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。