configureStore 是 Redux Toolkit 的核心函数,它帮我们自动设置了很多常用的 Redux 配置,比如:
- Redux DevTools 扩展:方便我们在浏览器中调试状态。
- Thunk 中间件:让我们可以轻松处理异步逻辑。
- Immer 库:让我们可以直接修改状态,而不用手动写一堆不可变逻辑。
用起来非常简单,比如下面这段代码:
const store = configureStore({
reducer: {
bill: billReducer
}
});
这里,configureStore 接收一个配置对象,其中 reducer 属性是一个对象,它的键是 state 的一部分,值是对应的 reducer 函数。在这个例子中,bill 是 state 的一个属性,它的值由 billReducer 函数来管理。简单来说,billReducer 就是专门负责处理 bill 这块状态的“管家”。
异步操作:基于 Promise 和 async/await
在实际开发中,我们经常需要处理异步操作,比如网络请求。Redux Toolkit 结合 Thunk 中间件,可以让我们轻松处理异步逻辑。比如下面这个例子:
// 编写异步 action
const getBillList = () => {
return async (dispatch) => { <