Redux教程:核心概念

让我们假设应用程序的状态由一个名为initialState的普通对象描述,该对象如下所示:

const initialState = {
   isLoading: false,
   items: [],
   hasError: false
};

应用程序中的每一段代码都不能更改此状态。要更改状态,您需要调度一个action。

什么是action?

action是一个简单的对象,它描述了使用type属性引起更改的意图。它必须具有类型属性,该属性可以告诉您正在执行哪种类型的操作。行动命令如下-

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information
}

action和状态通过一个称为Reducer的功能保持在一起。分派旨在引起变更的action。此更改由减速器执行。Reducer是在Redux中更改状态的唯一方法,从而使其更具可预测性,集中性和可调试性。处理’ITEMS_REQUEST’操作的reducer函数如下:

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

Redux有一个存储应用程序状态的存储。如果要基于数据处理逻辑拆分代码,则应开始拆分化简器,而不是在Redux中进行存储。

在本教程的后面,我们将讨论如何拆分化简器并将其与store合并。

Redux组件如下:

Redux教程:核心概念

作者:terry,如若转载,请注明出处:https://www.web176.com/redux/2239.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年3月31日 下午5:30
下一篇 2021年3月31日 下午5:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注