📜  Redux-操作

📅  最后修改于: 2020-10-20 04:54:53             🧑  作者: Mango


根据Redux官方文档,操作是商店的唯一信息来源。它承载着来自应用程序的有效信息负载进行存储。

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

const ITEMS_REQUEST = 'ITEMS_REQUEST';

除了此类型属性外,动作对象的结构完全取决于开发人员。建议您使操作对象尽可能轻,并仅传递必要的信息。

要在商店中引起任何更改,您需要首先使用store.dispatch()函数来调度动作。动作对象如下-

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

动作创作者

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

让我们了解动作创建器,该动作创建器使您可以调度动作“ ITEMS_REQUEST” ,该动作从服务器请求产品列表数据。同时,在“ ITEMS_REQUEST”操作类型中的化简器中将isLoading状态设置为true,以指示正在加载项目,并且仍未从服务器接收数据。

最初,假设未加载任何内容,则initialState对象中的isLoading状态为false。当在浏览器中接收到数据时,对应的化简器中的“ ITEMS_REQUEST_SUCCESS”操作类型中的isLoading状态将返回false。此状态可用作响应组件中的道具,以在打开数据请求时在页面上显示加载程序/消息。动作创建者如下-

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()的react-Redux帮助器方法对其进行访问。您还可以使用bindActionCreators()方法将许多动作创建者与调度函数绑定在一起。