【React Hooks】useReducer 用法

useReducer 介绍

const [state, dispatch] = React.useReducer(reducer, initialArg, init);

• useReducer是useState的替代方案
• 接收：如(state, action)=>newState的 reducer
• 返回：当前 state 和 dispatch 方法

• useReducer使用场景：
• state 逻辑复杂且包含多个子值
• 下一个 state 依赖于之前的 state

useReducer 使用

import React, { useReducer } from 'react';
//1.初始化
const initState = { count: 0 };
//2.纯函数
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload }
    case "decrement":
      return { count: state.count - action.payload }
    default:
      return state;
  }
}
function App() {
  //3.调用 reducer
  /*useReducer 两个参数  参数1：纯函数；参数2：初始值
  有个返回值是数组，数组的第一个元素是保存的状态第二个元素是发送状态的动作 dispatch
  */
  const [state, dispatch] = useReducer(reducer, initState);
  return (
    <div>
      <h2>useReducer</h2>
      {/* 4.使用 store */}
          count :{state.count}
      <button onClick={() => dispatch({ type: "increment", payload: 3 })}>+</button>
    </div>
  )
}

export default App;