React hooks - useReducer

本文主要是介绍React hooks - useReducer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

useReducer

- - - 用法
    - - 使用
      - 使用 Immer 更简单的编写 reducer
    - 注意事项

用法

可同时更新多个状态，且能把对状态的修改从组件中独立出来，状态更新逻辑较复杂时可以考虑使用。
代码逻辑更清晰，代码行为易预测：组件负责发出行为，useReducer 负责更新状态

const [state, dispatch] = useReducer(reducer, initState, initAction?)

reducer=(prevState, action)=> { return ‘处理好的新状态’ } 状态处理函数，接收上一次的旧值，以及dispatch穿入的信息对象，进行一系列处理，返回处理好的新状态（一定要是个崭新的对象，为了组件能够监听到状态的变化）
initState 初始状态
initAction 预处理函数，可选，将初始状态传入进行预处理，返回值被当做初始状态
state 获取状态值
dispatch({type: ‘此次操作的类型’, payload: ‘提交此次操作需要用到的数据’ }) 修改状态值，接收一个信息对象，触发reducer函数的执行，更新 state状态，状态更新导致组件重新渲染

使用

import React from 'react'// 定义默认值的类型，从默认值身上获取
type UserType = typeof defaultState
// 初始数据
const defaultState = { name: 'liulongbin', age: 16 }
// 状态处理函数
const reducer = (prevState: UserType) => {console.log('触发了 reducer 函数')return prevState
}
// 预处理函数
const initAction = (initAction: UserType) => {return {...initAction , age:Math.round(Manth.abs(initState.age))||18}
}

父组件

export const Father: React.FC = () => {const [state, dispatch] = useReducer(reducer, defaultState,initAction)return (<div><button>修改 name 的值</button><div className="father"><Son1 /><Son2 /></div></div>)
}

子组件1

const Son1: React.FC<UserType & {dispatch : React.Dispatch<ActionType>}> = (props) => {const {dispatch, ...user} = propsconst changeAge = () => {dispatch({type: 'AGE_INCREMENT', payload: 2}) // 年龄一次自增2}return (<div className="son1">{JSON.stringify(user)}<button onClick={()=>changeAge}>年龄自增2</button></div>)
}

子组件2

const Son2: React.FC<UserType & {dispatch : React.Dispatch<ActionType>}> = (props) => {const {dispatch, ...user} = propsconst changeAge = () => {dispatch({type: 'AGE_DECREMENT', payload: 1}) // 年龄一次自减1}return (<div className="son2">{JSON.stringify(user)}<button onClick={()=>changeAge}>年龄自减1</button>{/* 传第二手dispatch */}<GrandSon dispatch={ dispatch } /> </div>)
}

孙子组件

const GrandSon: React.FC<{dispatch : React.Dispatch<ActionType>}> = (props) => {const { dispatch } = propsconst reset = () => {dispatch({type: 'RESET'}) }return (<div className="grand-son"><button onClick={()=>reset}>重置</button></div>)
}

样式

.father {display: flex;justify-content: space-between;width: 100vw;
}.son1 {background-color: orange;min-height: 300px;flex: 1;padding: 10px;
}.son2 {background-color: lightblue;min-height: 300px;flex: 1;padding: 10px;
}

使用 Immer 更简单的编写 reducer

从 use-immer 中导入 useImmerReducer 函数，并替换掉 React 官方的 useReducer 函数的调用

npm install immer use-immer -S

修改 reducer 函数中的业务逻辑，case 代码块中不需要 return 新对象了，可在 prevState 上进行修改
因为 Immer 内部会复制并返回新对象

// 状态处理函数
const reducer = (prevState: UserType, action: ActionType) => {console.log('触发了 reducer 函数', action)switch (action.type) {// 修改名字case 'UPDATE_NAME':prevState.name = action.payloadbreak// 年龄自增payloadcase 'INCREMENT':prevState.age += action.payloadbreak// 年龄自减payloadcase 'DECREMENT':prevState.age -= action.payloadbreak// 重置case 'RESET':return initAction(defaultState)default:return prevState} 
}

export const Father: React.FC = () => {// 把 useReducer() 的调用替换成 useImmerReducer()const [state, dispatch] = useImmerReducer(reducer, defaultState,initAction)
}