useReducer ——React 个人学习笔记（6）useReducer 这是个啥？ 个人感觉就是把useState

useReducer

这是个啥？

个人感觉就是把useState中的对数据的操作方法抽象出来集中管理,应该也许大概是吧

用法

先写一个reducer函数

/**
   *
   * @param state 代表操作之前原来的值
   * @param action = {type: 具体的操作名称, payload: 操作附带的数据}
   */
  function reducer(state: number, action: { type: string, payload: number }) {
    switch (action.type) {
      case 'increment':
        return state + action.payload
      case 'decrement':
        return state - action.payload
      default:
        return state
    }
  }

在这个函数中

state是传进来的状态,action是传入的操作,包含两个配置,具体可以自定义

使用useReducer

const [count, dispatch] = useReducer(reducer, 100)

useReducer接收三个参数

• reducer
• initialArg 初始值
• init? 可选的,如果传入则初始参数为init(initialArg) 然后解构
• state 响应式状态
• dispatch 调度函数 用来执行修改状态

然后想要改变这个状态只需要用dispatch一下就好了

<>
      <div>{count}</div>
      <button onClick={() => dispatch({ type: 'increment', payload: 10 })} type="button">+10</button>
</>

完整代码

import { useReducer, useState } from 'react'

function Reducer() {
  // const [count, setCount] = useState(0)
  /**
   *
   * @param state 代表操作之前原来的值
   * @param action = {type: 具体的操作名称, payload: 操作附带的数据}
   */
  function reducer(state: number, action: { type: string, payload: number }) {
    switch (action.type) {
      case 'increment':
        return state + action.payload
      case 'decrement':
        return state - action.payload
      default:
        return state
    }
  }

  const [count, dispatch] = useReducer(reducer, 100)
  return (
    <>
      <div>{count}</div>
      <button onClick={() => dispatch({ type: 'increment', payload: 10 })} type="button">+10</button>
    </>
  )
}

export default Reducer