Redux - 动作 (Actions)

上一页
下一页

根据 Redux 官方文档，动作是存储的唯一信息来源。它承载着应用程序到存储的信息负载。

如前所述，动作是简单的 JavaScript 对象，必须具有 type 属性以指示执行的动作类型。它告诉我们发生了什么。类型应在您的应用程序中定义为字符串常量，如下所示：

const ITEMS_REQUEST = 'ITEMS_REQUEST';

除了这个 type 属性外，动作对象的结构完全取决于开发者。建议尽可能使您的动作对象轻量级，只传递必要的信息。

要使存储发生任何更改，您需要首先使用 store.dispatch() 函数分派一个动作。动作对象如下所示：

{ type: GET_ORDER_STATUS , payload: {orderId,userId } }
{ type: GET_WISHLIST_ITEMS, payload: userId }

动作创建器 (Actions Creators)

动作创建器是封装动作对象创建过程的函数。这些函数简单地返回一个简单的 Js 对象，即一个动作。它促进了编写干净的代码并有助于实现可重用性。

让我们了解一下动作创建器，它允许您分派一个动作 `'ITEMS_REQUEST'`，该动作请求从服务器请求产品项目列表数据。同时，在 `'ITEMS_REQUEST'` 动作类型中，reducer 中的 `isLoading` 状态设置为 true，以指示项目正在加载，并且尚未从服务器接收数据。

最初，在 `initialState` 对象中，`isLoading` 状态为 false，假设没有任何内容正在加载。当浏览器接收到数据时，在相应的 reducer 中的 `'ITEMS_REQUEST_SUCCESS'` 动作类型中，`isLoading` 状态将返回 false。此状态可用作 React 组件中的 prop，以便在请求数据期间在您的页面上显示加载程序/消息。动作创建器如下所示：

const ITEMS_REQUEST = ‘ITEMS_REQUEST’ ;
const ITEMS_REQUEST_SUCCESS = ‘ITEMS_REQUEST_SUCCESS’ ;
export function itemsRequest(bool,startIndex,endIndex) {
   let payload = {
      isLoading: bool,
      startIndex,
      endIndex
   }
   return {
      type: ITEMS_REQUEST,
      payload
   }
}
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      isLoading: bool,
   }
}

要调用 dispatch 函数，您需要将 action 作为参数传递给 dispatch 函数。

dispatch(itemsRequest(true,1, 20));
dispatch(itemsRequestSuccess(false));

您可以直接使用 store.dispatch() 分派动作。但是，您更有可能使用名为 `connect()` 的 react-Redux 辅助方法访问它。您还可以使用 `bindActionCreators()` 方法将多个动作创建器与 dispatch 函数绑定。

打印页面
上一页
下一页
广告