我终于明白了如何在 Redux Toolkit 中正确传递多个值

Source: Dev.to

今天是那种小小的学习时刻……但它彻底改变了我编写 Redux 逻辑的方式。

我过去的想法是：

• “Redux action 只能接受一个值”
• “如果需要更多数据，代码会变得很乱”

后来我学会了一种干净且可扩展的方式来处理 Redux Toolkit 中的多个值，那就是使用 prepare 函数。

我遇到的问题

我想要派发一个需要同时提供 贷款金额 和 贷款用途 的 action。起初我不知道该如何正确传递这两个值，曾考虑过：

• 创建多个 action，或
• 使用复杂的 payload 结构

这两种做法都显得凌乱且难以维护。

解决方案：Redux Toolkit 中的 prepare 函数

在 createSlice 中，你可以定义一个 prepare 方法来为你格式化 payload。

requestLoan: {
  prepare(amount, purpose) {
    return {
      payload: { amount, purpose },
    };
  },

  reducer(state, action) {
    if (state.loan > 0) return;

    state.loan = action.payload.amount;
    state.loanPurpose = action.payload.purpose;
    state.balance += action.payload.amount;
  },
}

这里发生了什么？

1️⃣ prepare 处理多个参数

不需要手动构造对象，你可以这样派发：

dispatch(requestLoan(5000, "Buy Car"));

prepare 会自动把它转换为：

payload: {
  amount: 5000,
  purpose: "Buy Car"
}

2️⃣ Reducer 保持简洁

Reducer 不再关心 payload 是如何创建的，只需要直接访问：

• action.payload.amount
• action.payload.purpose

3️⃣ 逻辑更专业

这种做法帮助你：

• 避免在组件中创建凌乱的 payload
• 将逻辑集中管理
• 编写更清晰、更易读的 reducer

为什么这很重要

Redux Toolkit 的设计初衷是 简化复杂模式。使用 prepare：

• 让 action 更灵活
• 保持 reducer 简洁
• 提升可扩展性

你不需要任何 hack——只需要正确的工具。

我的关键收获

你不需要为多个值创建多个 action。只要用 prepare 创建结构良好的 payload，就足够了。

最后感想

这并不是一个巨大的功能，但它代表了一次 思维方式的重大转变。Redux Toolkit 不仅仅是写更少的代码，更是写 更聪明、更整洁 的代码。如果你正在学习 Redux Toolkit，别忽视像 prepare 这样的小特性——它们往往能带来最大的不同。