个性化阅读
专注于IT技术分析

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()方法将许多动作创建器与分派函数绑定在一起。

赞(0)
未经允许不得转载:srcmini » redux动作介绍 – Redux教程

评论 抢沙发

评论前必须登录!