如何让 Redux Action 选择更有逻辑？-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个非常流行的 JavaScript 应用程序状态管理库。Redux 的核心思想是将应用程序的状态存储在一个单一的状态树中，并通过 Action（动作）更改这个状态。Action 是一个纯 JavaScript 对象，用于描述发生的事件和需要更新的状态。在 Redux 中，Action 是通过 dispatch 函数发送到 Reducer 中处理的。

在实际开发中，我们经常需要编写大量的 Action 来描述应用程序中的各种事件。但是，如果不加以限制，Action 可能会变得混乱，难以理解和维护。因此，让 Redux Action 选择更有逻辑是非常重要的。

选择合适的 Action 类型

在 Redux 中，Action 类型是一个字符串常量，用于描述 Action 的类型。为了让 Action 类型更有逻辑，我们应该选择合适的类型，以便更好地描述事件的类型。

例如，假设我们正在编写一个购物车应用程序。当用户添加商品到购物车时，我们需要发送一个 Action 来更新购物车的状态。我们可以使用以下类型来描述此 Action：

export const ADD_TO_CART = 'ADD_TO_CART';

这个类型很好地描述了事件的类型，而且也很容易理解。当我们在编写 Reducer 时，也可以很容易地识别这个 Action，并对购物车状态进行更新。

选择合适的 Action 参数

除了选择合适的 Action 类型外，还需要选择合适的 Action 参数。Action 参数是一个包含 Action 所需信息的对象。为了让 Action 参数更有逻辑，我们应该选择合适的属性名称和属性值。

例如，假设我们需要发送一个 Action 来更新购物车中商品的数量。我们可以使用以下参数来描述此 Action：

// javascriptcn.com 代码示例
export const UPDATE_CART_ITEM_QUANTITY = 'UPDATE_CART_ITEM_QUANTITY';

export function updateCartItemQuantity(itemId, quantity) {
  return {
    type: UPDATE_CART_ITEM_QUANTITY,
    payload: {
      itemId,
      quantity
    }
  };
}

在这个例子中，我们选择了合适的属性名称和属性值来描述 Action 参数。这使得我们可以轻松地识别和解析 Action 参数，并对购物车状态进行更新。

将相关的 Action 组合成一组

为了让 Redux Action 更有逻辑，我们应该将相关的 Action 组合成一组。这样做可以让我们更好地组织和管理 Action，并提高代码的可读性和可维护性。

例如，假设我们需要发送一组 Action 来更新购物车中的商品。我们可以将这些 Action 组合成一个对象，并将其导出为一个常量：

export const CART_ACTIONS = {
  ADD_TO_CART: 'ADD_TO_CART',
  REMOVE_FROM_CART: 'REMOVE_FROM_CART',
  UPDATE_CART_ITEM_QUANTITY: 'UPDATE_CART_ITEM_QUANTITY',
  CLEAR_CART: 'CLEAR_CART'
};

这个常量可以让我们更好地组织和管理 Action，并提高代码的可读性和可维护性。当我们在编写 Reducer 时，也可以很容易地识别这些 Action，并对购物车状态进行更新。

总结

在 Redux 中，让 Action 选择更有逻辑是非常重要的。通过选择合适的 Action 类型和参数，以及将相关的 Action 组合成一组，我们可以更好地组织和管理 Action，并提高代码的可读性和可维护性。

示例代码：https://github.com/ReduxChinese/redux-example-shopping-cart

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6508ff9095b1f8cacd3c98fc