使用 useReducers 调度函数发送多个动作?
Sending multiple actions with useReducers dispatch function?
在 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!")
}
}
然后可以像这样使用 useReducers 调度函数处理 React 应用程序中的状态。
[state, dispatch] = useReducer(messageReducer, initialState)
...
dispatch({type: SET_MESSAGE1: payload: {message1: "setting message1"})
dispatch({type: SET_MESSAGE2: payload: {message2: "setting message2"})
我想做的是将这两个突变发送到一个数组中,这样我只需要调用一次调度,如下所示:
dispatch([
{type: SET_MESSAGE1: payload: {message1: "setting message1"},
{type: SET_MESSAGE2: payload: {message2: "setting message2"}
])
既然我写下了这个,我意识到我可以在技术上只编写 reducer 来接受数组而不是字符串,然后映射到该数组上。但这被认为是一种好的做法吗?
如果你只想使用一次调度:
你可以再添加一个 switch case SET_MULTIPLE
到 reducer 中:
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 :
dispatch({type: SET_MULTIPLE , payload: {message1: "setting message1" , message2 : "setting message2"})
在 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!")
}
}
然后可以像这样使用 useReducers 调度函数处理 React 应用程序中的状态。
[state, dispatch] = useReducer(messageReducer, initialState)
...
dispatch({type: SET_MESSAGE1: payload: {message1: "setting message1"})
dispatch({type: SET_MESSAGE2: payload: {message2: "setting message2"})
我想做的是将这两个突变发送到一个数组中,这样我只需要调用一次调度,如下所示:
dispatch([
{type: SET_MESSAGE1: payload: {message1: "setting message1"},
{type: SET_MESSAGE2: payload: {message2: "setting message2"}
])
既然我写下了这个,我意识到我可以在技术上只编写 reducer 来接受数组而不是字符串,然后映射到该数组上。但这被认为是一种好的做法吗?
如果你只想使用一次调度:
你可以再添加一个 switch case SET_MULTIPLE
到 reducer 中:
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 :
dispatch({type: SET_MULTIPLE , payload: {message1: "setting message1" , message2 : "setting message2"})