了解传播如何对减速器作用起作用答案

【问题标题】：Understanding how spread works for reducer action了解传播如何对减速器作用起作用
【发布时间】：2020-02-13 16:02:33
【问题描述】：

作为钩子的新手，我正在转换一些具有多个状态属性的旧代码，并且在搜索如何减少我最初设置的 useState 钩子的数量时遇到了这段代码（丢失了链接）。以下 useReducer 挂钩代码按预期工作。我想我知道状态值是通过 setState (dispatch) 更新的，我想要弄清楚的是 reducer 的第二个参数如何使用扩展语法实际复制 state 和 newState 之间的值。我看过的所有示例都使用了 switch 语句和返回新状态的各种操作。 React 是否在后台做一些事情来完成这个副本？如果有人能解释 ...newState 如何作为减速器的操作工作，将不胜感激：

const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, initialState);

【问题讨论】：

标签： reactjs react-hooks react-state

【解决方案1】：

通常 reducer 内部有 switch 语句，但这不是必需的。 Reducer 只是一个函数，它将先前的输入作为第一个参数，将操作（类型和有效负载）作为第二个参数，并返回相同的状态（如果没有条件匹配）或新状态。但不需要使用 switch 语句。所以你在这个 reducer 中做什么是作为第二个参数被合并到先前状态中传递的任何内容。

const reducer = (state, newState) => ({ ...state, ...newState });

与

相同

const reducer = (state, newState) => {
    return { ...state, ...newState };
}

例如

const initialState = { a: 1, b: 2 };

在设置新状态时，

setState({ b: 3, c: 4});

将以先前状态（初始状态）和以上对象作为第二个参数调用reducer，reducer将返回合并后的状态

{ ...initialState, ...newState } // pseudo code
{ ...{a: 1, b:2 }, ...{ b:3, c: 4} }
{ a: 1, b: 3, c: 4 } // returned result

【讨论】：

我想我要问的是你指的合并实际上是什么？

【解决方案2】：

在您的示例中，它更像是分隔减速器。当你只有一个动作时，这有点混乱。

尝试在您的示例中再添加一个操作，您将得到：

const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, initialState);
const reducer1 = (state, newState) => ({ ...state, ...newState });
const [state1, setState1] = useReducer1(reducer1, initialState1);

如果你按照你提到的切换方式这样做，你可以这样做：

const initialState = {someprops, type:1};//you have to sepecify type in state
    const reducer = (state, newState) => {
     switch(state.type){
    case 1:
     return { ...state, ...newState };
    case 2:
    //do something else
     return { ...state, ...newState };
    };
    const [state, setState] = useReducer(reducer, initialState);

【讨论】：