React使用@reduxjs/toolkit

React使用@reduxjs/toolkit

前言

在开发的时候，有一些数据往往是需要贯穿整个项目的，并且是需要实时能够更新状态的，在Vue中我们会使用vuex来做全局状态管理，那么在React项目中，我们要怎么来做全局状态管理呢

在React项目中实现状态互通的方法有很多

例如：

1. 使用useContext
2. 使用Redux
3. 使用Mobx

本文章就教大家简单使用redux来进行状态管理，相信很多项目也是使用redux就行状态管理

安装Redux

在使用redux时，我们需要先安装所需的依赖

yarn add @reduxjs/toolkit
yarn add react-redux
yarn add redux

配置Redux

1、新建文件

安装完成后，我们需要进行配置，先再src文件夹下创建store文件夹，并且创建index.ts

创建完成后，可以先暂时留空，我们先创建每一个模块

2、创建模块

在项目中，我们往往会全局管理多个状态，一旦状态过多，全部写在一起就容易让代码的可读性变差，所以可以根据业务类型进行拆分，这边先拆分一个user模块，在store文件夹下新建module文件下，用于存放全部的模块

在module文件夹下创建user.ts来管理user模块的全局状态

import {
   
    createSlice } from '@reduxjs/toolkit'
import type {
   
    PayloadAction } from '@reduxjs/toolkit'
// 菜单的接口
interface Imenu {
   
   
  id: number
  path: string
  meniName: string
  icon: string
  children?: Imenu[]
}
// 用户信息接口
interface IUserInfo {
   
   
  id: number