掌握 React-Redux 和 Redux Toolkit：前端状态管理的现代实践指南

引言

在现代前端开发中，状态管理是一个核心议题。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。