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

怼烎@ 2024-03-26 19:49 75阅读 0赞

## 前言 ##

`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>
      );
    }

在上面的例子中，定义了一个 `reducer` 函数来管理状态的变化，它根据传入的 `action` 来执行不同的逻辑，返回新的状态。

在组件中，我们使用 `useReducer` 来初始化状态，并获取到一个 `dispatch` 函数来触发状态的更新。

点击按钮，会调用 `dispatch` 函数，并传入一个包含 `type` 属性的对象（即action）。这个对象用来表示将要进行的状态更新操作。

## 注意： ##

使用 `useReducer` 可以帮助我们更好的管理组件状态，使代码更易于维护和调试。不过，在一般情况下，使用 `useState` 可能会更加简单和高效，我们在日常开发中，需要根据实际情况进行评估。