如何在 redux reducer 中更新我的初始状态

Question

您好，我有这个用户列表容器，它还呈现用户表单容器。我只是将两个容器都放在一个 if 中，这样在初始页面加载时将显示用户列表。单击添加用户按钮后，将显示用户表单。

当我点击 isAddUser 按钮时，如何从我的 reducer 中更改状态 isAddUser？

addUser(){
    //button to show add user form 
    //update the reducers initial state isAddUser
}

if(this.props.isAddUser){
    return (
        <div className="row">
            <div className="container table-responsive">
                <UserForm/>
            </div>
        </div>
    )
} else {
    return(
             <div className="row">
                <div className="container table-responsive">
                    <div className="text-right"> 
                        <button 
                            className="btn btn-primary text-right"
                            onClick={this.addUser.bind(this)}>
                            Add User
                        </button>
                    </div>
                    <table className="mt-1 table table-hover">
                        <thead className="thead-light">
                            <tr>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th></th>
                            </tr>
                        </thead>                
                        {userList}  
                    </table>
                </div>    
            </div> 
          )
      }
}


const mapStateToProps = state => ({
    users: state.users.items,
    isAddUser: state.users.isAddUser
})

export default connect(mapStateToProps, { fetchUsers, deleteUser })(UserList);

减速机

我需要将 isAddUser: false 从 initialstate

更新为 true

import { FETCH_USERS, DELETE_USER } from '../actions/User/Types';

const initialState = {
   items: [],
   item: {},
   isAddUser: false
}
export default function(state = initialState, action){
    switch(action.type){
        case FETCH_USERS:
          //code here

        case DELETE_USER:
          //code here

        default: 
           return state;
    }
}

Answer 1

创建名为 UPDATE_ADD_USER 的新操作。当您调用此操作更新变量时。

case UPDATE_ADD_USER:
        return {...state, isAddUser: true};

创建类似 fetchUsers, deleteUser 的操作，然后将其发送到操作列表中。

export default connect(mapStateToProps, { fetchUsers, deleteUser,updateAddUser })(UserList);

在addUser函数中

addUser(){
   this.props.updateAddUser();//call new action created
}

如何在 redux reducer 中更新我的初始状态

How to update my initial state in redux reducer

reducers

reactjs

redux

react-redux