import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react';
import ReactDOM from 'react-dom';



export function Three() {
  let initialState = 0;
  // 如果你希望初始狀態是一個{number:0}
  // 可以在第三個引數中傳遞一個這樣的函式 ()=>({number:initialState})
  // 這個函式是一個惰性初始化函式，可以用來進行復雜的計算，然後返回最終的 initialState
 



  const init = (initialState) => {
    return {
      number: initialState
    };
  }

  const reducer = (state, action) => {
    debugger
    switch (action.type) {
      case 'increment':
        return { number: state.number + 1 };
      case 'decrement':
        return { number: state.number - 1 };
      
 
default:
        throw new Error();
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState, init);
  return (
    <>
      Count: {state.number}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  )

}
 

下面和上面一樣，只是引數改了下形式，對比看下

import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react';
import ReactDOM from 'react-dom';



export function Three() {
  let initialState = { number: 0 };
  // 如果你希望初始狀態是一個{number:0}
  // 可以在第三個引數中傳遞一個這樣的函式 ()=>({number:initialState})
  // 這個函式是一個惰性初始化函式，可以用來進行復雜的計算，然後返回最終的 initialState



  const reducer = (state, action) => {
    //debugger
    switch (action.type) {
      case 'increment':
        return { number: state.number + 1 };
      case 'decrement':
        return { number: state.number - 1 };
      default:
        throw new Error();
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.number}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  )

}

總結：

第一個引數是(state, action) => newState的 reducer，第二個引數是state的值

reducer裡面的action就是底下dispatch的引數，state就是initialState的值

還可以參考https://www.jianshu.com/p/14e429e29798