了解减速器动作的排列方式

Question

作为挂钩新手，我正在转换一些具有多个状态属性的旧代码，在搜索如何减少最初设置的useState挂钩数量时，我遇到了这段代码（失去了链接）。以下useReducer钩子代码按预期工作。我想我知道state值是通过setState（dispatch）更新的，我想弄清楚的是reducer的第二个参数是如何使用spread语法在state和newState之间复制值的。我看到的所有示例都使用switch语句和各种返回新状态的操作。React是不是在后台做了些什么来实现这个复制？如果有人能解释。。。newState作为减速机的作用，我们希望：

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

Answer 1

在您的示例中，更像是分离减速器。当你只有一个动作时，会有点困惑。

试着在你的例子中再添加一个动作，你会得到这个：

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);

Answer 2

通常减速机内部有开关语句，但这不是要求。Reducer只是一个函数，它将以前的输入作为第一个参数，将操作（类型和负载）作为第二个参数，并返回相同的状态（如果没有条件匹配）或新状态。但不需要使用switch语句。所以，在这个减速机中，您要做的是，当第二个参数在前一个状态中被合并时，所传递的内容。

const reducer=（state，newState）=

与

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

例如

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

关于建立新的国家,，

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

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

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