使用useReducers调度功能发送多个动作?

时间:2020-05-24 04:49:57

标签: javascript reactjs react-hooks use-reducer

在React中使用f2钩子时,是否可以通过调度功能发送多个动作?我尝试向其传递一系列操作,但这会引发未处理的运行时异常。

为明确起见,通常会有一个初始状态对象和一个约简器,如下所示:

mapply(function(x, y) toString(setdiff(x[x!=' '], y)), 
                      strsplit(df$f1, ','), strsplit(df$f2, ','))

然后可以像这样使用useReducers调度功能处理React应用程序中的状态。

useReducer

我想做的是将这两个突变发送到一个数组中,这样我只需要调用一次调度,就像这样:

const initialState = { message1: null, message2: null }

const messageReducer = (state, action) => {
  switch(action.type) {
    case SET_MESSAGE1:
      return {...state, message1: action.payload.message1}
    case SET_MESSAGE2:
      return {...state, message2: action.payload.message2}
    default:
      throw new Error("Something went wrong!")
  }
}

现在我写下来,我意识到从技术上讲,我可以编写reducer来接受数组而不是字符串,然后映射到该数组。但这是一个好习惯吗?

1 个答案:

答案 0 :(得分:2)

如果您只想使用一次调度:

您可以在reducer中添加另外一个开关盒SET_MULTIPLE

const messageReducer = (state, action) => {
  switch(action.type) {
    case SET_MESSAGE1:
      return {...state, message1: action.payload.message1}
    case SET_MESSAGE2:
      return {...state, message2: action.payload.message2}
    case SET_MULTIPLE:
      return {...state, ...action.payload } // <---- HERE
    default:
      throw new Error("Something went wrong!")
  }
}

并更改调度,如下所示:

dispatch({type: SET_MULTIPLE , payload: {message1: "setting message1" , message2 : "setting message2"})