“这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战”

1、Redux概述

1.1 什么是Redux

Redux 是一个用于JavaScript状态容器，提供可与预测化的状态管理
Redux可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试
Redux 除了和React 一起使用外，还支持其他界面库，而且体积较小（只有2KB)

1.2 redux的设计初衷

随着js单页面开发日趋复杂，js需要管理更多的state（状态），这些state可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据，也包括UI状态等

管理不断变化的state非常麻烦，如果一个model 的变化会引起另一个model 的变化，那么当view 变化时就可能引起对应的model 以及另一个model的变化，依次可能会引起另一个view的变化，所以就会产生混乱

而Redux就是为了去解决这个问题

1.3 Redux三大核心

1 单一数据源

整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store 中

2 State是只读的（并不是说不能修改）

唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象

store.dispatch({type:'COMPLETE_TODO',index:1})

3 使用纯函数来执行修改

为了描述action如何改变state tree，你需要去编写reducers

Reducers只是一些纯函数（相同的输入会得到相同输出的函数），它接收先前的state和action，并且返回新的state，

可以复用、可以控制顺序、传入附加参数

2、Redux的组成

2.1 State 状态

就是我们传递的数据，常用state分为服务器端的数据、 UI展示的状态、 App级别的状态

2.2 Action 事件

Action 是把数据从应用传到stroe的载体，它是store数据的唯一来源，一般来说，我们可以通过store.dispatch() 将action传递给store

Action 的特点

Action的本质就是一个js的普通对象
Action对象内部必须要有一个type属性来表示要执行的动作（本次操作的类型，也是reducer条件判断的依据）
多数情况下，这个type会被定义成字符串常量
除了type字段之外，action的结构随意进行定义
在项目中，更多的喜欢用action创建函数（就是创建action的地方）
只是描述了有事情要发生，并没有描述如何去更新state

2.3 Reducer

Reducer本质就是一个函数，他是用来响应发送过来的actions，然后经过处理，把state发送给Store的。

接收当前应用的state和触发的动作action，计算并返回最新的state。

注意：在Reducer函数中，需要return返回值，这样Store 才能接收到数据

// 举个栗子计算器reducer，根据state（当前状态）和action（触发的动作加、减）参数，计算返回newState

function countReducer(state, action) {
    switch(action.type) {
    case 'add':
    return state + 1;
    case 'sub':
    return state - 1;
    default:
    return state;
    }
}

2.4 Stroe

Store就是把action与reducer联系到一起的对象

主要职责

维持应用的state
提供getState()方法获取state
提供dispatch()方法发送action
通过subscribe()来注册监听
通过subscribe()返回值来注销监听

Redux 初识