redux动作介绍 - Redux教程

上一章Redux教程请查看：redux存储

根据Redux官方文档，动作action是储存的唯一信息来源，它携带了应用程序要存储的信息的有效负载。

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

const ITEMS_REQUEST = 'ITEMS_REQUEST';

除了这个type属性之外，action对象的结构完全取决于开发人员。建议尽量保持动作对象的轻量，只传递必要的信息。

要在存储中进行任何更改，首先需要使用store.dispatch()函数来调度一个动作。作用的对象如下：

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

动作的创建器

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

让我们了解一下action
creator，它允许你分派一个动作“ITEMS_REQUEST”，该动作从服务器请求产品项列表数据。同时，在“ITEMS_REQUEST”操作类型中的reducer中，isLoading状态变为true，以指示项目正在加载，并且仍然没有从服务器接收到数据。

最初，在initialState对象中isLoading状态为false，假设没有加载任何内容。当在浏览器中接收到数据时，isLoading状态将在相应的reducer中的“ITEMS_REQUEST_SUCCESS”动作类型中返回为false。当请求数据时，此状态可以用作react组件中的一个道具，在页面上显示加载程序/消息。动作的创建器是这样的：

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(itemsRequest(true,1, 20));
dispatch(itemsRequestSuccess(false));

你可以直接使用store.dispatch()来调度操作，但是，你更可能使用名为connect()的response – redux帮助器方法来访问它。你还可以使用bindactioncreator()方法将许多动作创建器与分派函数绑定在一起。

动作的创建器

猜你喜欢