Redux - 核心概念

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

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

应用程序中的每一段代码都无法更改此状态。要更改状态，您需要调度一个操作。

什么是行动？

操作是一个普通对象，它描述了导致类型属性发生更改的意图。它必须有一个 type 属性来告诉正在执行什么类型的操作。操作命令如下 -

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

动作和状态由一个名为“Reducer”的函数结合在一起。调度一个动作的目的是引起改变。这个改变是由reducer执行的。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 中的存储。

我们将在本教程后面讨论如何拆分减速器并将其与存储结合起来。

Redux 组件如下 -

数据处理逻辑