当前位置：首页 > news >正文

【随笔二】useReducer详解及其应用场景

news 2025/9/14 10:52:35

前言

useReducer 实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。

一般情况下，我们使用 useState 就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些。

状态逻辑复杂：当状态的更新逻辑比较复杂时，使用 useReducer 可以将这个逻辑封装在 reducer 函数中，使代码更加清晰易懂。
多组件共享状态：当多组件需要共享一个状态时，可以将这个状态放在父组件，然后通过 useReducer 将状态和更新函数传递给子组件，从而实现状态共享。
需要处理连续的多个状态更新：当需要连续处理多个状态更新时，使用 useReducer 可以帮助我们更好地管理状态的变化和更新。

1. useReducer 参数

接收 3 个参数：

reducer 函数：（state, action）=> newState

在使用 useReducer 时，我们需要先定义一个 reducer 函数，这个函数接收 2个参数

state ：是当前最新的状态值

action：用于告诉 reducer 当前执行的操作，reducer 会根据不同的操作执行不同的逻辑，从而更新不同的 state

newState：返回值，返回一个新的state

reducer 是一个纯函数，没有任何 UI 和副作用。

initState

这个没什么好说的，是指初始的state

init ：是一个函数，（inState）=> initialState

这个参数是可选的，是一个函数，参数是初始的state。如果传入了这个参数，那么 初始state 就是 init(initState) 的返回结果

2. useReducer 返回值

返回的是一个数组

//
const [state, dispatch] = useReducer(reducer, initState, getInitData);

state ：当前的state
dispatch：是一个函数，(action) => void

通过调用 dispatch 传入 action，来告诉 reducer 应该执行什么操作，然后更新 state

比如：

dispatch({type: 'ADD', playod: 'xxx'})

举一个简单的例子：

import { useReducer } from 'react';function reducer(state, action) {switch (action.type) {case 'increment':return state + 1;case 'decrement':return state - 1;default:throw new Error();}
}function Counter() {const [count, dispatch] = useReducer(reducer, 0);return (<div><p>Count: {count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}