useReducerの遅延初期化について | React

Question

React Hooks の公式DocsのuseReducerの項目で、遅延初期化という部分がございます。

しかし、該当の公式コードを実行してもエラーになる箇所がございます。

そのコードがこちら

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

const [state, dispatch] = useReducer(reducer, initialCount, init);

第二引数に整数ではなくinitialCountを入れるのは何故ですか？

第二引数にinitialCountを入れると、NaNとなると思いました。

こちらの第二引数には、別途計算された値が入るんだよということを言いたいのであれば分かります。

Comments

[maisumakun]

> しかし、該当の公式コードを実行してもエラーになる箇所がございます

どのようなエラーが出たのですか？

[hoshi-takanori]

<Counter initialCount={123} /> みたいに使うってことでは。

[dwqdqwddddddqq]

すみません、その通りです。

Answer 1

第二引数に整数ではなくinitialCountを入れるのは何故ですか？

単純に、「initialCountには整数を渡している」だけかと思います。