如何在redux react.js的reducer函數中進行多重分配和添加操作？

Question

我正在開發一個使用 redux 進行狀態管理的 react 應用程序，我對此很陌生，我必須在 reducer 函數中執行多個狀態更改操作。

這是我的減速器功能：

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client]
  }
}

我想要做的是，向我在這里做的clientList添加一個項目，然后重新分配 2 個變量clientName和clientStatus太像：

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  }
} 

如何在減速器功能中實現這一點？ 任何幫助將不勝感激。

這是我的 github 鏈接：這里

您可以在 clientReducer 中看到 reducer，在 Form/PopupActions 中調用 ON_SUBMIT 操作。

Answer 1

問題

您已經在返回值之外聲明了值。

https://github.com/Himanshuranjan30/ClientDash2/blob/master/src/clientDashboard/actions/clientReducer.js#L269-L278

case Actions.ON_SUBMIT_CLIENT:{
  clientName:""; // <-- not returned
  clientStatus:""; // <-- not returned
  clientAccessGrants:[] // <-- not returned
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    
  }
}

解決方案

如果你想更新狀態，它們需要作為從 reducer 案例返回的下一個狀態值的一部分返回。

case Actions.ON_SUBMIT_CLIENT:
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "";
    clientStatus: "";
    clientAccessGrants: [];
  }

更新

因此，您似乎要么調度錯誤的動作，要么在減速器中處理錯誤的動作。

submitClient操作創建者分派Actions.SUBIMT_CLIENT ( 'CLIENT/SUBIMT_CLIENT' ) 類型的操作，但您擁有的 reducer 案例正在處理Actions.ON_SUBMIT_CLIENT ( 'Actions.ON_SUBMIT_CLIENT' ) 類型的操作。 動作創建器中“提交”的拼寫有一個錯字，所以這個很難追蹤。

更新減速器以處理現在分派的相同動作類型會清除/重置其他狀態。

case Actions.SUBIMT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  };
}

這是你的 github repo的codeandbox fork 。 我添加了 redux 開發工具，所以如果你有擴展，你可以看到它們被調度時的動作並檢查狀態差異。

Answer 2

如果 clientName 和 clientStatus 在 cleintList 之外，您可以使用此代碼

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: [...state.clientName, action.clientName],
    clientStatus: [...state.clientStatus, action.clientStatus],
    clientAccessGrants: [...state.clientAccessGrants, action.clientAccessGrants]
  }
} 

但如果沒有，您可以使用此代碼

case Actions.ON_SUBMIT_CLIENT:{
state.clientList.clinetName=action.client.clientName
state.clientList. clientStatus =action.client. clientStatus
          return {
            ...state,
            clientList: [...state.clientList, action.client]
          }
        }

Answer 3

將 clientName 和 Client Status 添加到您的 Reducer 初始狀態，也喜歡

const initialState = {
  clientList: [],
  clientName: '',
  clientStatue: ''
}

export default function reducerName(state= initialState, action) {
  switch(action.type) {
    case ON_SUBMIT_CLIENT:
      return {
        ...state,
        clientList: [...state.clientList, action.client],
        clientName:"",
        clientStatus:"",
        clientAccessGrants:[]
      }
  }
}