如何在antdpro中使用redux

redux是一个状态管理的库，和Vuex的作用差不多。当项目变得越来越大，状态管理也随之变得困难这是我们就需要使用状态管理库来协助开发。官方提供了相关工具redux-toolkit

1. 在项目中引入 react-redux和react-toolkit

1
2
3
npm install @react-redux

npm install @reduxjs/toolkit

2. 在项目中引入

看官网文档说是在根组件外面包裹Provider组件，但是因为antdpro没有/src/index.tsx这个文件，所以我们可以在App.tsx中引入，在childrenrender函数这里使用。

1
2
3
4
5
6
7
8
9
10
11
import { Provider } from 'react-redux';
childrenRender: (children) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          <Provider>
            {children}
          </Provider>
        </>
      );
    },

此时会提示我们Provider组件缺少属性store，别急后面看。

3. 创建store

在src/store/index.ts中

1
2
3
4
5
6
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
    reducer: {
    }
})
export default store

然后再到app.ts中引入store

1
2
3
4
5
6
7
8
9
10
11
12
import { Provider } from 'react-redux';
import store from './store';
childrenRender: (children) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          <Provider store={store}>
            {children}
          </Provider>
        </>
      );
    },

这样就完成了引入。

以下是官方说法

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，我们强烈建议你使用它。

它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 store、定义 reducer，不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action type。它还自带了一些最常用的 Redux 插件，例如用于异步逻辑 Redux Thunk，用于编写选择器 selector 的函数 Reselect ，你都可以立刻使用。

此时我们需要创建切片

4. 创建切片

以一个加减数字为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// src/store/features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  count: 0,
};

// 创建一个 Slice 
export const counterSlice = createSlice({
  // 命名空间，name会作为action type的前缀
  name: 'counter',

  // 初始化状态
  initialState,

  // 1、定义reducer更新状态的函数
  // 2、是组件中dispatch使用的actions函数
  reducers: {
    // 定义一个加的方法
    increment: (state) => {
      state.count += 1;
    },
    // 定义一个减的方法
    decrement: (state) => {
      state.count -= 1;
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload
    },
  },
});

// createSlice 会自动生成与我们编写的 reducer 函数同名的 action creator。
// 导出actions函数
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// 导出reducer，创建store
export default counterSlice.reducer;

然后再/src/store/index.ts

1
2
3
4
5
6
7
8
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counterSlice";
const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})
export default store

这样就算是完成了，那么如何在组件中使用呢？

5. 在组件中使用

在组件中引入这两个东西

1
2
const dispatch = useDispatch()
const { count } = useSelector((store:any) => store.counter);

在组建中可以直接使用count，并且是响应式的。

dispatch可以触发reducer中的方法

比如要count+1可以这样

disptch(increment())就可以使count+1，

当然dispatch也可以带载荷，也就是参数，需要这样写

1
dispatch(increment(2));//这样count就会+2

目前关于redux只探索到这里，如果涨新知识，继续更新。