react hooks~useReducer用法

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

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

export default Counter;

useReducer

 是 React 提供的一个 Hook，用于管理组件的状态。它接收两个参数：reducer 和 initialState。

reducer是一个函数，用于根据 action更新 state; initialState是状态的初始值。

在这个例子中，initialState是一个对象，包含一个 count属性，初始值为 0。

reducer函数接收两个参数：state和 action。

state是当前状态，action是一个对象，包含一个 type属性，用于指定更新状态的方式。在这个例子中，reducer函数根据 action.type的值更新 state.count的值。

在组件中使用 useReducer，可以通过调用 dispatch函数来触发状态的更新。

dispatch函数接收一个 action对象作为参数，用于指定更新状态的方式。在这个例子中，通过调用 

dispatch({ type: 'increment' })来增加 count的值，调用 dispatch({ type: 'decrement' })来减少 count的值。最后，组件返回一个包含当前 count值和两个按钮的 JSX 元素。当点击按钮时，会调用对应的 dispatch函数来更新状态。