React中使用useReducer模拟实现redux管理React组件状态

React中使用useReducer模拟实现redux管理React组件状态

在React中，我们经常需要管理组件的状态。除了useState，还有另一个用于状态管理的钩子叫做useReducer。useReducer提供了一种更灵活和强大的方式来管理状态，特别适用于复杂的状态逻辑。

1.什么是useReducer？

useReducer是React提供的一个用于状态管理的钩子，它可以替代useState来管理组件的状态。它基于Reducer模式，通过指定不同的action来更新状态。Reducer是一个纯函数，接收当前的state和action，返回新的state。

2.为什么使用userReducer？

在某些情况下，useState可能无法满足我们对状态管理的需求。例如，当状态具有复杂的逻辑，或者需要根据之前的状态计算新状态时，就可以考虑使用useReducer。它可以帮助我们更好地组织组件的状态逻辑，使代码更易于维护和理解。

3.如何使用useReducer？

import React, { useReducer } from 'react';

// 定义reducer函数
const reducer = (state, action) => {
  switch(action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

// 在组件中使用 useReducer
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};

export default Counter;

在上面的示例中，我们定义了一个简单的Counter组件，使用了useReducer来管理count这一状态。通过dispatch不同的action，我们可以实现增加和减少count的功能。

4.进阶版，使用useReducer实现代替Redux

操作步骤如下

1.得先建一个store文件,如下图

useStore里面内容如下：

import { useReducer, useContext, createContext } from "react";//首先引入需要的hooks

export const TYPES = {
  CHANGE_STATE: "CHANGE_STATE",
}; //编写操作需要的TYPES

const initialState = {
  fundList: ["白酒", "医疗", "新能源"],
}; //添加初始化数据

const reducer = (state, action) => {
  switch (action.type) {
    case TYPES.CHANGE_STATE:
      return { ...state, ...action.payload };
    default:
      return state;
  }
};//建一个reducer纯函数

export const useInitStore = (_initialState = {}) => {
  return useReducer(reducer, { ...initialState, ..._initialState });
}; //使用useReducer生成一个可以创建数据操作读写API的函数

export const Context = createContext(null); //创建Context,暴露给外层组件用

export const useStore = () => {
  return useContext(Context) || {};
}; //使用useContext和Context获取读写API,这里封装成一个函数，外层组件可直接通过调用useStore函数获取

2.在组件内部使用如下

首先是父组件

import React from "react";

import { useInitStore, Context } from "./Store/useStore"; //父组件内引入useStore文件里提前暴露好的初始化store函数和Context

import Demo from "./Demo";

const UseReducerDemo = () => {
  const [state, dispatch] = useInitStore({}); //创建数据读写api

  return (
    //通过Context.Provider将state和dispatch提供给所有组件，所有标签，组件必须放在Context.Provider内
    <Context.Provider value={{ state, dispatch }}> 
      <Demo />
    </Context.Provider>
  );
};

export default UseReducerDemo;

子组件demo内容如下：

import React from "react";

import { useStore, TYPES } from "./Store/useStore";//获取useStore函数和操作类型TYPES

import { Button } from "antd";

const Demo = () => {Context.Provider传递的state和dispatch
  const { state, dispatch } = useStore();//利用useStore获取父组件通过Context.Provider传递的state和dispatch

  const { fundList } = state;

  const handleAdd = () => {
    dispatch({
      type: TYPES.CHANGE_STATE,
      payload: {
        fundList: ["半导体", "军工"],
      },
    });//使用方法和redux里的一致，通过dispatch改变state里的数据
  };

  return (
    <>
      {fundList?.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <Button onClick={handleAdd}>改变基金</Button>
    </>
  );
};

export default Demo;

效果如下

以上是完整的useReducer实现redux的过程。

5.总结

useReducer是一个非常有用的工具，能够帮助我们更好地管理组件的状态。它适用于需要复杂状态逻辑的场景，通过Reducer模式，可以使状态管理更加清晰和可控。

希望本文对你理解和使用useReducer有所帮助！