如何在Redux Reducer中更新我的初始狀態

Question

嗨，我有這個用戶列表容器，它也呈現用戶表單容器。 我只是將這兩個容器都放在了如果在初始頁面加載中將顯示用戶列表的情況下。 單擊添加用戶按鈕后，將顯示用戶表單。

當我單擊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動作fetchUsers, deleteUser然后將其發送到動作列表中。

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

在addUser函數中

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