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) => {
    // 发送网络请求
    const res = await axios.get('http://localhost:8888/ka');
    // 请求成功后，触发同步 reducer，更新状态
    dispatch(setBillList(res.data));
  };
};

这里发生了什么？

• 1. 我们定义了一个异步 action getBillList，它会发送一个网络请求。
• 2. 请求成功后，通过 dispatch 触发一个同步的 reducer action（比如 setBillList），把请求回来的数据传递给 reducer。
• 3. reducer 拿到数据后，更新 state 状态。

整个过程非常流畅，就像是你点了个外卖，外卖小哥送到后，你直接把食物放进冰箱一样自然。

组件中的使用：useDispatch 钩子

在 React 组件中，我们可以通过 useDispatch 钩子来分发 action。useDispatch 会返回一个稳定的 dispatch 函数引用，你可以在组件中随时调用它。

比如：

const dispatch = useDispatch();
dispatch(getBillList());

这里发生了什么？

• 1. useDispatch 会自动从 Redux store 中获取 dispatch 方法。
• 2. 你只需要调用 dispatch(getBillList())，就可以触发异步 action，获取数据并更新状态。

小提示：useDispatch 的另一个好处是，它会在组件树中自动传递 dispatch 方法，避免了手动传递的麻烦。就像是你家里有个智能助手，你需要什么，它都会自动递给你，完全不用你操心。

总结

- configureStore：Redux Toolkit 的核心，帮我们自动配置 Redux 的常用功能。
- 异步操作：通过 Thunk 和 async/await，轻松处理网络请求和状态更新。
- useDispatch：在组件中分发 action，自动获取 dispatch 方法，简化代码。

Redux Toolkit 的这些特性，让状态管理变得像日常生活中的小事一样简单。你只需要专注于业务逻辑，剩下的交给它来处理就好啦！