useReducer的第三个参数的目的是什么？

5 浏览
0 Comments

useReducer的第三个参数的目的是什么？

从文档中可以得知：

[init，第三个参数] 允许你将计算初始状态的逻辑从 reducer 外部抽取出来。这对于以后根据动作重置状态也很方便。

还有这段代码：

function init(initialCount) {
  return { count: initialCount };
}
function reducer(state, action) {
  switch (action.type) {
    ...
    case 'reset':
      return init(action.payload);
    ...
  }
}
function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  ...
}

为什么我要这样做，而不是重用一个常量initialState？

const initialState = {
  count: 5,
};
function reducer(state, action) {
  switch (action.type) {
    ...
    case 'reset':
      return initialState;
    ...
  }
}
function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  ...
}

对我来说，这种方式更加简洁。

0