什么是Redux？

JS 应用的状态容器，提供可预测的状态管理。

工作原理

Redux的工作原理如上图。

• 用户需要定义store。store中也定义了Reducer。在Reducer中有方法。用户在界面中使用Dispatch调用Redux中定义的方法即可。

Redux ToolKit

Redux封装的工具，方便用户使用，据说以前的Redux不好用。没用过，不清楚。 Redux ToolKit提供了方便的API。 常用api： Redux Toolkit 包含：

• configureStore()：封装了createStore，简化配置项，提供一些现成的默认配置项。它可以自动组合 slice 的 reducer，可以添加任何 Redux 中间件，默认情况下包含 redux-thunk，并开启了 Redux DevTools 扩展。
• createReducer() 帮你将 action type 映射到 reducer 函数，而不是编写 switch...case 语句。另外，它会自动使用 immer 库来让你使用普通的 mutable 代码编写更简单的 immutable 更新，例如 state.todos[3].completed = true。
• createAction() 生成给定 action type 字符串的 action creator 函数。该函数本身已定义了 toString()，因此可以代替常量类型使用。
• createSlice() 接收一组 reducer 函数的对象，一个 slice 切片名和初始状态 initial state，并自动生成具有相应 action creator 和 action type 的 slice reducer。
• createAsyncThunk: 接收一个 action type 字符串和一个返回值为 promise 的函数, 并生成一个 thunk 函数，这个 thunk 函数可以基于之前那个 promise ，dispatch 一组 type 为 pending/fulfilled/rejected 的 action。
• createEntityAdapter: 生成一系列可复用的 reducer 和 selector，从而管理 store 中的规范化数据。
• createSelector 来源于 Reselect 库，重新 export 出来以方便使用。

使用

如果是一个新的项目，可以使用如下指令通过模板生成项目

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

如果是一个老的项目，可以直接直接安装redux toolkit以来

npm install @reduxjs/toolkit

我使用template创建的项目。 创建完的项目如下图所示。

这里redux-toolkit给我们初始化了一个样例代码。在app和features文件夹下。是一个计数的组件。 运行后可以看到界面如下：

实战

首先我将框架默认生成的代码删掉。结构我就保持redux推荐的。 针对redux我会创建两个文件。一个是app/store.js，一个是features/book/BookSlice.js。

具体代码如下： store.js:

import {configureStore} from '@reduxjs/toolkit';
import bookReducer from "../features/book/BookSlice";

export const store = configureStore({
    reducer: {
        // book的reducer
        bookReducer
    },
})

一个项目中只有一个redux的store。这里配置了不同模块的store，比如我上面的bookReducer就是书籍列表的reducer定义。 另一个文件是BookSlice.js，该文件主要定义actions和reducer信息。包括操作的具体方法定义等。

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

// 初始化state
const initialState = {
    // 书籍列表{id,name,time}
    books: [{"id": new Date().getTime(), "name": "数据结构与算法(初始化)", time: new Date().toLocaleString()}]
}

export const bookSlice = createSlice({
    // slice的名字，名称空间的意思，他被用于初始化action的type。
    name: "book",
    // 初始化的state
    initialState,
    // 定义了具体的操作。
    reducers: {
        // 定义reducer更新状态的函数，在组件中dispatch需要传递具体的函数名，比如dispatch(add())
        add: (state) => {
            const book = {"id": new Date().getTime(), "name": "书籍" + Math.random(), time: new Date().toLocaleString()}
            state.books.push(book)
        }
    },
})

export const {add} = bookSlice.actions
export default bookSlice.reducer

代码中我加了一些注释。不再一一讲解。 接下来需要在组件中使用userSelector,和useDispatch api了。 App.js:

import React, {Fragment} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import './App.css';
import {add} from "./features/book/BookSlice";

function App() {
    // 使用useDispatch api
    const dispatch = useDispatch()
    // 使用useSelector 查询store中的state。进行解构赋值得到books数组。特别注意：bookReducer是store.js中reducer里的key。
    const {books} = useSelector(state => state.bookReducer);

    // 该方法主要是用于组装一个table。
    function getTable(books) {
        const ele = books.map((item, i) => {
            return <tr key={i}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.time}</td>
            </tr>
        });
        return (<table border="1" cellPadding="0">
            <thead>
            <tr>
                <td>ID</td>
                <td>书籍名称</td>
                <td>创建时间</td>
            </tr>
            </thead>
            <tbody>
            {ele}
            </tbody>
        </table>)
    }

    return (
        <Fragment>
            {getTable(books)}
            <hr/>
            {/*使用dispatch调用slice中的函数。*/}
            <button onClick={() => {
                dispatch(add())
            }}>添加书籍
            </button>
        </Fragment>
    );
}

export default App;

此时还为完成。 接下来需要在index.js中使用<Provider store={store}>包裹根组件，这里的store，就是store.js index.js代码如下：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

接下来我通过redux tool看下。 打开页面：

可以看到页面正常读取到了redux中的state的books数据，并展示到了页面上，右侧红色部分是redux tool展示出来的初始化的数据。 当我点击添加书籍的时候

1处就新增了一条数据，2出展示了action。调用了book/add这里需要说明下。这个名字是redux自动生成的。但是确实根据我们指定的名称和函数名生成的， book就是BookSlice中的createSlice的name值，而add就是reducers下的add函数名。 3处展示了state的值，可以看到最终state也是增加了一条，也正是其变化了，才使界面重新渲染。

还有几个api没有使用，今天比较晚了，改天再学再说。