请大声告诉我，什么是redux！

什么是Redux？

相信学过vue的小伙伴们都对vuex、pinia等状态管理工具非常熟悉，那么在react中有没有一种类似于vuex和pinia的工具呢？那肯定是有滴，不然Facebook脸上也挂不住咱就说是不是😀。这就是大名鼎鼎的redux，Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行，下图可形象描述redux。

redux上手

redux管理数据流程

Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer

state - 一个对象存放着我们管理的数据状态
action - 一个对象用来描述你想怎么改数据
reducer - 一个函数根据action的描述生成一个新的state

环境准备

在react中使用redux，推荐使用redux的插件：Redux Toolkit 和 react-redux

Redux Toolkit

Redux Toolkit是官方推荐的编写Redux逻辑的方法，是一套工具集，可以简化书写方式，并且其内置immer支持可变式的状态修改，并且内置thunk有更好的异步处理。

react-redux

是用来连接Redux和React组件的中间件

有了上面的基础之后，接下来通过一个todoList的案例来带大家感受一下什么是redux。

redux实战

首先我们创建一个react项目（过程忽略。。。。）

创建好项目之后，我们安装Redux Toolkit以及react-redux依赖。

npm i @reduxjs/toolkit react-redux

使用redux实现todoList

项目目录结构如下

使用RTK创建todosStore

todosStore.js

todosStore.js 复制代码

import { createSlice } from "@reduxjs/toolkit";

const todosStore = createSlice({
    name: "todos",
    // 初始状态
    initialState: [
        {
            id: 1,
            title: "Learn React",
            completed: true,
        },
        {
            id: 2,
            title: "Learn Redux",
            completed: false,
        },
        {
            id: 3,
            title: "Learn Redux-Toolkit",
        }
    ],
    // 修改数据的同步方法
    reducers: {
        addTodos(state, action) {
            state.push(action.payload)
        },
        deleteTodos(state, action) {
            return state.filter(item => item.id !== action.payload.id)
        },
        editTodos(state, action) {
            return state.map(item => item.id === action.payload.id ? action.payload : item)
        }
    }
})
const { addTodos, deleteTodos, editTodos } = todosStore.actions
export { addTodos, deleteTodos, editTodos }
export default todosReducer

这段代码是一个使用Redux Toolkit创建的todos应用的状态管理模块。首先定义了一个名为todos的状态切片，包含初始的todo列表、三个用于修改状态的同步方法（添加、删除、编辑todo），并导出了对应的action creator函数和reducer函数。这些函数可以用来在应用中更新todo列表的状态。

看到这里大家有没有好奇，todosStore是什么东西？为什么将reducers中的属性解构出来要用todosStore.actions?接下来，让我们来输出todosStore一探究竟。

打印后，我们可以看到reducers属性中的方法全部都在todosStore的actions属性中。

store/index.js

js 复制代码

import { configureStore } from "@reduxjs/toolkit";
import todosReducer from "../modules/todosStore";

// 创建store
const store = configureStore({
    reducer: {
        todos: todosReducer
    }
});


export default store;

这段代码是使用Redux Toolkit的configureStore函数来创建一个Redux store的简单示例。它将之前定义的todosReducer作为reducer传入，以便在store中管理todos相关的状态。最后，它将这个store实例导出，使其可以在应用的其他部分被使用。

那么store到底是什么东西呢？打印store可以看到，store中包含多种内置的方法，我们常见的dispatch和subscribe都被其内置。