reactjs - 只需使用 action creators、redux 和 thunk 将对象添加到空数组

Question

我想简单地将一个新的“客户”添加到clientList位于我的clientReducer. 我可以清楚地看到一切都在工作，因为当我console.log(state)在 my中时clientReducer，我可以看到来自输入的信息已经通过调度、动作创建者并且现在在减速器中。我的问题是这里的这段代码......我正在尝试继续将客户端添加到我的 redux 商店。

我尝试使用this.setState({})但它不读取它。

这是clientActions：

export const addClient = (client) => {
    return(dispatch, getState) => {
        dispatch({type: 'ADD CLIENT', client})
    }
}

这是clientReducer：

const initState = {
    clientList: []
}

const clientReducer = (state = initState, action) => {
    switch (action.type) {

        case 'ADD CLIENT' : 
            let clientList =  [...state.clientList, action.client];
            this.setState({
              clientList : clientList
            })
            return state;
        
        default : return state;
    }
}    

export default clientReducer

标签： reactjsreduxactionstate

Answer 1

您无需setState在 reducer 内部执行操作，而是返回更新后的状态。

const clientReducer = (state = initState, action) => {
    switch (action.type) {

        case 'ADD CLIENT' : 
            let clientList =  [...state.clientList, action.client];
            return {
              ...state,
              clientList : clientList
            }

        default : return state;
    }
}    

export default clientReducer