react-redux存储未更新

Question

mapStatetoProps中的值显示为未定义

Index.js文件：

static initialAction() {
    return fetchUsers();
}

render() {

    const user = this.props.user;
    console.log(user);

    return (
        <div className="usersWrapper"></div>
    )
}

const mapStateToProps = state => ({
    user: state. usersR.users.users
});

UserReducer.js文件中的部分代码：

const defaultUserState = {
   users:[],
 }

const userReducer = (state = defaultUserState , action) => {
    switch(action.type){
         case actionType.USER_DATA:
            console.log("update_user_begins",action,action.payload);

            let newState={
                    users: [...state.users, ...action.payload]
                }
            state = {...state,users: newState }          

        break;
    } 

}

console.log(state);

输出结果如下：

action.payload的值为：

[
    { Name: 'ABC', Age: 10, Address: 'COLOMBO 02' },
    { Name: 'DEF', Age: 11, Address: 'COLOMBO 03' },
    { Name: 'wxy', Age: 45, Address: 'Nugegoda' }
]

UserReducer的返回状态为：

{ users: { users: [ [Object], [Object], [Object] ] } }

Answer 1

确保不要忘记将您的组件连接到redux存储

export default connect(mapStateToProps)(myComponent)

或者检查mapStateToProps上的路径，并确保它是一个好的路径，或者注销整个状态来检查好的路径：

 render() {
          const state= this.props.state;
           console.log(state);

        return (
           <div className="usersWrapper">
           </div>
 )
    }


    const mapStateToProps = state => ({
        **state: state**

 });

Answer 2

我猜，您忘记将return添加到您的reducer中了。

const defaultUserState = {
   users:[],
 }

const userReducer = (state = defaultUserState , action) => {
    switch(action.type){
         case actionType.USER_DATA:
            console.log("update_user_begins",action,action.payload);

            let newState={
                    users: [...state.users, ...action.payload]
                }
            return {...state, users: newState } // <= here is return, not assignment.         

        break;
    } 

}

Answer 3

我认为你需要从reducer返回newState，并且不要改变之前的状态，你可以这样做

const userReducer = (state = defaultUserState , action) => {
switch(action.type){
     case actionType.USER_DATA:
        console.log("update_user_begins",action,action.payload);

        let newState={
                users: [...state.users, ...action.payload]
            }
        return {...state, users: action.payload }          

} 

}

希望能有所帮助