ReduxToolkit：轻松掌控Redux状态管理

Redux Toolkit 简介：轻松掌控 Redux 状态管理

Redux Toolkit 是 Redux 的官方工具包，它为 Redux 状态管理提供了强大的功能和简便的操作。让我们深入了解 Redux Toolkit 的优势以及如何使用它进行同步和异步数据修改。

同步数据修改

同步数据修改涉及在应用程序中直接更新状态，而无需任何异步操作。Redux Toolkit 提供了 createReducer() 方法，用于创建处理特定动作类型的 reducer 函数。

以下是一个示例 reducer 函数对象，它处理 ADD_TODO 和 TOGGLE_TODO 动作：

const reducer = createReducer(initialState, {
  ADD_TODO: (state, action) => [...state, action.payload],
  TOGGLE_TODO: (state, action) => state.map((todo) => todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo),
});

异步数据修改

异步数据修改涉及从外部源获取数据或执行其他异步操作。Redux Toolkit 通过 createAsyncThunk() 方法提供了管理异步数据修改的便捷方式。它接受一个动作类型和一个返回 Promise 的函数，并自动生成相应的三种动作：

• pending：操作正在进行中
• fulfilled：操作已成功完成
• rejected：操作已失败

以下是一个 fetchTodos thunk 函数的示例，它从 API 获取待办事项数据：

const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const data = await response.json();
    return data;
  }
);

将 Slice Reducer 合并为 Root Reducer

Redux Toolkit 允许您将来自不同 slice（应用程序状态的部分）的 reducer 组合到一个根 reducer 中。使用 combineReducers() 方法，您可以将 slice reducer 组织到一个对象中：

const rootReducer = combineReducers({
  todos: todosReducer,
  filters: filtersReducer,
});

然后，将根 reducer 传递给 configureStore() 方法来创建 Redux store：

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

示例代码

以下是一个使用 Redux Toolkit 的完整示例代码：

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => [...state, action.payload],
    toggleTodo: (state, action) => state.map((todo) => todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo),
  },
});

const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const data = await response.json();
    return data;
  }
);

const store = configureStore({
  reducer: {
    todos: todosSlice.reducer,
  },
});

store.dispatch(fetchTodos());

常见问题解答

1. Redux Toolkit 和 Redux 有什么区别？

Redux Toolkit 是 Redux 的一个工具包，提供了额外的功能和简化流程。

2. createReducer() 方法有什么好处？

createReducer() 方法可以方便地管理同步数据修改，并自动生成处理不同动作类型的 reducer 函数。

3. createAsyncThunk() 方法如何处理异步数据修改？

createAsyncThunk() 方法生成三个动作：pending、fulfilled 和 rejected，用于管理异步操作的状态。

4. combineReducers() 方法有什么作用？

combineReducers() 方法将来自不同 slice 的 reducer 组合成一个根 reducer，以便在 Redux store 中管理应用程序的整体状态。

5. Redux Toolkit 对 React 应用程序有什么好处？

Redux Toolkit 使得在 React 应用程序中管理状态变得更加简单，并提供了针对异步操作和应用程序切分的有效解决方案。