在现代 React 应用程序中,状态管理是一个至关重要的部分。使用 Redux Toolkit 可以简化 Redux 的配置和管理。本文将通过三个文件的示例,详细讲解如何使用 Redux Toolkit 创建和管理一个简单的计数器状态,并通过类比源 store 和根 store 的概念,加以更好地理解。
一、什么是源 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]