使用react-redux能让我们组件之间互相通信，并且相比较以前的写法，更加的简单明了。在使用前，我们需要npm install一下react-redux以及reduxjs/toolkit。
npm install react-redux
注意：如果找不到模块，再执行npm install @types/react-redux一下即可
详细内容可参考https://github.com/reduxjs/react-redux
npm install @reduxjs/toolkit
详细内容可参考https://www.npmjs.com/package/@reduxjs/toolkit
Provider：react-redux 提供Provider组件，可以让容器组件拿到state。
store ：作为一个 prop 传给 Provider 组件。
useSelector：从redux的store对象中获取数据（state）。
使用方法：const result:any= useSelector(selector:Function,equalityFn?:Function)
useDispatch：返回redux store中对dispatch函数的引用。
使用方法：const dispatch = useDispatch() dispatch(方法)
configureStore（）：包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合您的碎片，添加您提供的任何Redux中间件，默认情况下包括Redux -thunk，并支持使用Redux DevTools扩展。
首先在src文件夹下创建store文件夹，并创建index.ts文件。因为reduxjs/toolkit是碎片化，所以需要使用configureStore将碎片组合起来，以便维护。在index文件中的代码如下：
import { configureStore } from ‘@reduxjs/toolkit‘;
export default configureStore({
reducer: {
},
});
import { Provider } from ‘react-redux‘ import store from ‘@src/store‘ ReactDOM.render( <Provider store={store}> <ConfigProvider locale={zh_CN}> <Route /> </ConfigProvider > </Provider>, document.getElementById(‘root‘) );
需求：数字的默认值为0，点击加1按钮，数字加1，减1按钮，数字减1。
首先，在store文件夹下创建一个counterSlice文件，并引入createSlice。
import { createSlice } from ‘@reduxjs/toolkit‘
然后创建一个counterSlice碎片
export const counterSlice = createSlice({
name: ‘counter‘, //碎片名称
initialState: { //碎片的默认值
value: 0,
},
reducers: { //方法
increment: (state) => { //增加1函数
state.value += 1;
},
decrement: (state) => { //减少1函数
state.value -= 1;
},
},
});
最后将increment，decrement添加到action，并且声明一个变量selectCount，导出这个碎片。
export const { increment, decrement } = counterSlice.actions;
export const selectCount = (state: any) => state.counter.value;
export default counterSlice.reducer;
注：将increment，decrement添加到action，外部可直接调用，并且会自动触发reducers，并且返回最新的state。
创建counterSlice碎片后，需要在store的index文件中，将这个碎片组合起来。
import { configureStore } from ‘@reduxjs/toolkit‘;
import counterSlice from ‘./counterSlice‘
export default configureStore({
reducer: {
counter: counterSlice //碎片的name：碎片
},
});
如何在我们需要的地方使用呢？这种情况下就需要使用useSelector和useDispatch了。完整的代码以及注释如下：
import React from ‘react‘; import { useSelector, useDispatch } from ‘react-redux‘; //引入useSelector以及useDispatch import { selectCount, increment, decrement } from ‘@src/store/counterSlice‘; //引入counterSlice碎片中的变量以及函数
import { Button } from ‘antd‘ export default () => { const count = useSelector(selectCount); //获取count的值，会随着按钮的点击而改变 const dispatch = useDispatch() return ( <div> <p>count的值是{count}</p> <Button onClick={() => dispatch(increment())}>加1</Button> //点击加1按钮时，触发increment <Button onClick={() => dispatch(decrement())}>减1</Button> //点击减1按钮时，触发decrement </div> ); }
到这，简单的一个demo就完成了。
原文：https://www.cnblogs.com/minorf/p/12925054.html