React中使用Redux Toolkit状态管理的示例详解
作者：算是难了
一、什么是源 Store 和根 Store？
这里只是自己觉得这样定义会更好理解一些,实际并没有这样的概念
源 Store
源 store 是模块化的状态管理单元，负责特定功能的状态和操作。使用 createSlice 创建的 slice 就是源 store。
类比：可以想象成一个专注于特定产品的车间，例如一个玩具制造车间。它只负责制造特定类型的玩具（如计数器的状态管理），并且有自己的一套操作流程（增、减、重置）。
根 Store
根 store 是整个应用的状态管理中心，使用 configureStore 组合多个源 store。它负责将所有的状态和逻辑集中起来，提供给整个应用使用。
类比：可以想象成一个大型工厂，里面有多个车间（源 store）。有负责制造玩具的,有负责制造家具的。。。这个工厂负责管理和协调各个车间的生产，并且能够根据需求调整生产线（即添加或修改源 store）。
二、创建 Counter Store
2.1 定义源 Store
在一个新的文件 counterSlice.js 中，我们将创建计数器的 slice：
// store/modules/xxx.js
import { createSlice } from '@reduxjs/toolkit';
// 创建一个 slice
const counterSlice = createSlice({
name: 'counter', // 定义 slice 的名称
initialState: { // 初始化状态
count: 0, // 需要被全局维护的数据
},
reducers: { // 定义修改状态的方法
increment(state) {
state.count += 1; // 增加计数
},
decrement(state) {
state.count -= 1; // 减少计数
},
reset(state) {
state.count = 0; // 重置计数
},
},
});
// 导出 action 对象
export const { increment, decrement, reset } = counterSlice.actions;
// 导出 reducer 函数
export const counterReducer = counterSlice.reducer;在这个例子中，counterSlice 就是我们的源 store，它初始化了一个 count 状态，并提供了三个 reducers 来修改这个状态。
三、组合 Store(根)
在另一个文件 store.js 中，我们将使用 configureStore 来组合根 store，并把 counterReducer 传入：
// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import { counterReducer } from './counterSlice';
// 创建根 store
const store = configureStore({
reducer: {
counter: counterReducer, // 将源 reducer 组合到根 store 中
},
});
export default store;这里，store 就是我们的根 store，它可以容纳多个源 store（在本例中只有 counter），并将它们组合在一起进行集中管理。
根store中可以定义多个源store，这里只示例一个
四、连接 React 和 Redux
我们目前只是使用了源store中的reducer函数来组合根store，还有定义导出的源store中的action对象并没有使用
现在我们已经定义了 store，但还需要将其链接到我们的 React 应用中。我们将使用 react-redux 中的 Provider 组件来实现这一点。
4.1 绑定 Store（为组件注入store）
在 index.js 或 App.js 中，我们将 Provider 组件包裹住我们的应用：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);4.2 使用 Store 中的数据(调用触发)
在我们的组件中，使用 useSelector 钩子来访问 store 中的状态，并使用 useDispatch 钩子来触发 action。
// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';
const Counter = () => {
const count = useSelector(state => state.counter.count); // 获取状态
const dispatch = useDispatch(); // 获取 dispatch 函数
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(reset())}>Reset</button>
</div>
);
};
export default Counter;在这个组件中，我们通过 useSelector 获取 count 状态，并通过 useDispatch 触发 increment、decrement 和 reset 这三个 action。
总结
通过以上步骤，我们成功使用 Redux Toolkit 创建了一个简单的计数器应用。整个过程包括：
- 定义源 store（创建 slice）。
- 将源 store 组合到根 store 中。
- 通过
Provider注入 store 到 React 应用中。 - 使用
useSelector和useDispatch连接组件与 store，实现状态管理。
扩展:
1.action传参:
- 对源store的reducer中的action对象多传递一个action参数,这个参数就是我们触发方法传递的数据了
- 通过action.payload拿到数据
addToNum(state, action) {
state.count = action.payload
}调用触发
dispatch(addToNum(20))
2.异步操作获取数据
(1).在源store外面定义一个异步函数并暴露出去,异步函数中调用dispatch()
dispatch中传递源store中reducer中的action对象
// channelStore.js (源)
// 解构出action对象
const {setChannel} = channelStore.actions
// 封装函数
const fetchChannelList = ()=>{
return async(dispatch) =>{
const res = await.get(url) // url是请求后端的地址
// setChannel是源store在reducer中定义的action对象
dispatch(setChannel(res.data.channels))
}
}注意,因为给action对象传递参数了,所以参考上面的action传参,需要源store中的action对象多定义一个action形参来接收数据
// channelStore.js (源)
reducers:{
setChannels(state,action){
state.channelList = action.payload
}
}(2).在需要的地方调用:
// App.js
const dispatch = useDispatch()
useEffect(()=>{
dispatch(fetchChannelList())
},[dispatch]以上就是React中使用Redux Toolkit状态管理的示例详解的详细内容，更多关于React Redux Toolkit状态管理的资料请关注脚本之家其它相关文章！