引言
在现代前端开发中，状态管理是一个核心议题。Redux 是一个流行的状态管理库，它以其可预测的状态管理而闻名。React-Redux 是 Redux 的官方绑定库，专为 React 应用程序设计，使得在 React 中使用 Redux 变得更加简单和直观。
React-Redux 概览
React-Redux 提供了一种将 Redux 与 React 组件集成的方法。随着 Hooks 的引入，React-Redux 也全面拥抱了这一新特性，提供了 useSelector、useDispatch 和 useStore 等 Hooks，使得我们可以更加方便地在函数组件中使用 Redux。
Redux Toolkit 简介
为了进一步简化 Redux 的使用，Redux 官方推出了 Redux Toolkit。这是一个官方的、 opinionated 的工具集，用于简化 Redux 应用的开发。Redux Toolkit 提供了创建 reducer、action 和 store 的简化方法，使得 Redux 的使用更加直观和高效。
React-Redux + Redux Toolkit 实践
安装依赖
首先，我们需要安装 @reduxjs/toolkit 和 react-redux 这两个依赖：
bash
npm install @reduxjs/toolkit react-redux
目录结构简化
使用 Redux Toolkit 后，原本 Redux 目录中的四个文件可以简化为两个，因为 Toolkit 会自动帮助我们生成一些代码。
Provider 组件的使用
在 index.js 中，我们需要从 react-redux 中引入 Provider 组件，并用它包裹应用的根组件。这样，我们就可以将 store 作为 Provider 的 store 属性传入，而不需要在 App.jsx 根组件上挂载。
import { Provider } from "react-redux";
import store from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
创建 Store
在 store.js 中，我们从 @reduxjs/toolkit 引入 configureStore 方法来创建数据仓库。这个方法接受一个配置对象，其中可以配置 reducer。
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
reducer: {
// 配置 reducer
}
});
组件连接仓库
在组件中，我们可以使用 useSelector Hook 直接连接仓库，获取状态数据。
const { list } = useSelector(state => state.todo);
组件向仓库派发 Action
现在，我们可以使用 useDispatch Hook 获取 dispatch 方法，并通过它派发 action。
dispatch(add(value));
Action 可以直接从 slice 中导出，而不需要我们手动编写 action creator。
export const { add, del, change } = todolistSlice.actions;
与后端交互
在实际应用中，当数据发生变化时，我们不仅需要更新前端的状态库，还需要与后端服务器进行交互，以保持数据的一致性。以下是一般的更新流程：
结语
React-Redux 结合 Redux Toolkit 提供了一种强大且简洁的状态管理解决方案，使得在 React 应用中管理状态变得更加容易。通过 Hooks，我们可以更加灵活地在函数组件中使用 Redux，而 Redux Toolkit 的引入进一步简化了 Redux 的配置和使用。希望这篇博客能帮助你更好地理解和使用 React-Redux 和 Redux Toolkit。
