redux核心概念和数据流 – Redux教程

上一章Redux教程请查看：redux介绍和安装

本章我们来讨论redux的核心概念，以及redux的数据流。

Redux核心概念

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

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

应用程序中的每段代码都不能改变这种状态。要更改状态，你需要调度一个动作。

什么是动作？

操作是一个普通对象，它用type属性描述引起更改的意图。它必须具有type属性，该属性指示正在执行的操作的类型。动作的命令是这样的

return {
    type: 'ITEMS_REQUEST', //动作类型
    isLoading: true //负载信息
 }

动作和状态由一个名为reduce的函数连接在一起。发送一个动作的目的是引起变化。此更改由reducer执行，reducer是改变Redux状态的唯一方法，使其更加可预测、集中和可调试，处理“ITEMS_REQUEST”操作的reducer函数如下所示

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

Redux只有一个存储，存储应用程序状态。如果希望根据数据处理逻辑分割代码，应该开始分割reducer而不是Redux中的存储。

我们将在本教程的后面讨论如何分割reducer并将其与存储组合。

Redux组件如下

Redux数据流

Redux遵循单向数据流，这意味着你的应用程序数据将遵循单向绑定数据流，随着应用程序的增长和变得复杂，如果不能控制应用程序的状态，就很难重现问题并添加新特性。

Redux通过强制限制状态更新的方式和时间来降低代码的复杂性。这样，管理更新后的状态就很容易了，我们已经知道了Redux的三个原则。下图将帮助你更好地理解Redux数据流

• 当用户与应用程序交互时，将分配操作。
• 使用当前状态和分派的操作调用根减速函数，根reducer可以将任务分配给更小的reducer函数，最终返回一个新的状态。
• 存储通过执行它们的回调函数来通知视图。
• 视图可以检索更新后的状态并重新呈现。