使用 Redux Toolkit 的 createSlice 和 createReducer

Redux Toolkit 是 Redux 官方发布的工具集，旨在简化 Redux 工作流，提高开发效率。其中，createSlice 和 createReducer 是 Redux Toolkit 的两个核心函数，它们为我们提供了一种更简洁、更直观的方式来定义 Redux 的 reducer，使得我们能够更加专注于业务逻辑的实现。

createSlice

createSlice 是 Redux Toolkit 中用于快速创建可变状态的 reducer 的函数。它的返回值是一个包含了 reducer 和 action creators 的对象。下面是一个 createSlice 的例子：

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

const initialState = {
  count: 0,
  loading: false,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    setLoading(state, action) {
      state.loading = action.payload;
    },
  },
});

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

在这个例子中，我们首先定义了一个名为 initialState 的对象，包含了 count 和 loading 两个字段。

然后，通过 createSlice 函数创建了一个名为 counter 的 slice。createSlice 函数的参数包括：

• name：slice 的名称，用于在 Redux store 中标识该 reducer。
• initialState：slice 的初始状态。
• reducers：一个对象，包含了这个 slice 相关的 reducer 和 action creators。

在 reducers 对象中，我们定义了三个 reducer：increment、decrement 和 setLoading。这三个 reducer 分别对应了三种不同的 action：

• increment：将 count 状态加一。
• decrement：将 count 状态减一。
• setLoading：设置 loading 状态。其中，action.payload 是用于更新 loading 状态的新值。

最后，我们通过 counterSlice.actions 导出了 increment、decrement 和 setLoading 三个 action creators，以及通过 default 导出了这个 slice 的 reducer。

createReducer

createReducer 是 Redux Toolkit 中用于快速创建普通 reducer 的函数。与 createSlice 不同的是，createReducer 不会自动创建 action creators，而是需要我们手动定义。下面是一个 createReducer 的例子：

import { createReducer } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
  loading: false,
};

const counterReducer = createReducer(initialState, {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  },
  setLoading(state, action) {
    state.loading = action.payload;
  },
});

export const increment = () => ({ type: "increment" });
export const decrement = () => ({ type: "decrement" });
export const setLoading = (loading) => ({
  type: "setLoading",
  payload: loading,
});

export default counterReducer;

在这个例子中，我们仍然定义了一个名为 initialState 的初始状态的对象。

然后，我们通过 createReducer 函数创建了一个 counterReducer。createReducer 的第一个参数是初始状态，第二个参数是一个包含了 reducer cases 的对象。

这里的 reducer cases（也称为 reducer handlers）包含了三个 function：

• increment：将 count 状态加一。
• decrement：将 count 状态减一。
• setLoading：设置 loading 状态。其中，action.payload 是用于更新 loading 状态的新值。

最后，我们手动地定义了 increment、decrement 和 setLoading 这三个 action creators，返回了一个带有 type 和 payload 属性的对象。

总结

createSlice 和 createReducer 是 Redux Toolkit 提供的两个重要函数，用于简化 Redux reducer 的编写。它们的优点是代码量少、易读性高、可维护性高，可以帮助我们更快地构建出高质量的 Redux 应用。