掌握 Redux 工具包：简化 React 应用程序中的状态管理

Redux 工具包：简化 React 中的状态管理

Redux Toolkit 是一个官方的、固执己见且功能强大的库，它简化了在应用程序中设置 Redux 的过程。 Redux 虽然非常强大，但可能需要大量样板代码来处理状态管理、操作创建和化简器。 Redux Toolkit (RTK) 旨在通过提供一组简化常见任务的实用函数来使 Redux 开发更轻松、更高效。

使用 Redux Toolkit，您可以以更简洁、更有组织的方式配置存储、编写减速器并定义操作。它还包括一些默认设置，帮助开发人员避免常见错误和样板代码。

---

1.什么是 Redux 工具包？

Redux Toolkit 是官方推荐的库，用于以更结构化、简洁且用户友好的方式编写 Redux 逻辑。它通过提供降低 Redux 设置复杂性的实用程序来帮助消除对重复代码的需求，例如自动处理不可变状态更新以及简化操作创建者和减速器。

---

2. Redux工具包的核心特性

Redux Toolkit 提供了多个内置功能和实用程序来简化 Redux 的使用：

1.配置商店

configureStore 通过自动添加必要的中间件（例如用于异步操作的 redux-thunk）以及设置 Redux DevTools 进行调试来简化存储配置。

示例：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• configureStore 处理商店创建，与 createStore 函数相比，它更容易、更标准化。

2.创建切片

createSlice 是一个简化 Redux 切片创建的实用程序，它代表 Redux 状态的一部分，并包含减速器和操作。

示例：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createSlice 根据您定义的reducer 函数自动生成动作创建者 和动作类型。

3. createAsyncThunk

createAsyncThunk 是一个用于处理异步逻辑的工具，例如从 API 获取数据，并将其集成到 Redux 状态中。它生成一组操作创建者（待处理、已完成和拒绝状态）来管理异步流。

示例：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• createAsyncThunk 帮助以干净、易于理解的方式管理 Redux 中的异步请求。

4.创建实体适配器

createEntityAdapter 是一个用于管理 Redux 中规范化数据的实用程序。它可以帮助您有效地处理数据集合，例如项目列表。

示例：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createEntityAdapter 简化了数据集合（例如列表或数组）的处理，允许更轻松地管理实体，例如添加、更新或删除数据。

---

3. Redux 工具包的优点

1.更少的样板

RTK 显着减少了设置 Redux 所需的样板代码量。您现在可以使用 createSlice 自动生成所有内容，而不是手动编写操作类型、操作创建器和化简器。

2.不可变更新（通过 Immer.js）

RTK 在底层使用 Immer.js，它允许您在减速器中编写“变异”代码。然而，Immer 通过自动创建状态副本并对它们应用突变来确保状态保持不可变。

3.更好的开发者体验

通过自动配置 redux-thunk 等中间件并与 Redux DevTools 集成，Redux Toolkit 可以更轻松地调试和监控 Redux 状态。您还可以轻松使用 TypeScript 等工具，因为 RTK 为类型安全提供了强大的支持。

4.简化的异步逻辑

createAsyncThunk 函数有助于管理复杂的异步逻辑，并将其无缝集成到您的 Redux 状态中，降低管理异步操作的复杂性。

5.使用 createEntityAdapter 标准化数据

RTK 提供诸如 createEntityAdapter 之类的实用程序来处理标准化数据。这对于在 Redux 中管理大量数据（例如用户列表、产品等）特别有用。

---

4.在 React 应用程序中设置 Redux 工具包

这是在 React 应用程序中设置 Redux Toolkit 的基本指南。

第 1 步：安装 Redux 工具包和 React-Redux

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

第2步：创建切片和Reducers

使用 createSlice 定义 Redux 切片，它将包含特定状态片段的操作和化简器。

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

第 3 步：配置商店

接下来，使用 configureStore 配置 Redux 存储。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

第 4 步：在 React 组件中使用 Redux

使用react-redux 中的Provider 组件包装您的应用程序，以使Redux 存储在您的整个应用程序中可用。

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• useSelector：访问 Redux 状态。
• useDispatch：调度操作来修改状态。

---

5.结论

Redux Toolkit 通过删除样板代码并提供 createSlice、createAsyncThunk 和 configureStore 等实用函数来简化使用 Redux 的过程。通过使用RTK，开发者可以专注于应用程序的核心逻辑，而无需担心Redux配置的复杂性。

使用 RTK，您可以以更高效且可维护的方式管理同步和异步状态，使其成为大型 React 应用程序的绝佳选择。

---

以上是掌握 Redux 工具包：简化 React 应用程序中的状态管理的详细内容。更多信息请关注PHP中文网其他相关文章！