redux学习笔记（一）

简介

redux是一个状态管理库，试图让 state 的变化变得可预测
首先我们要明白Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。但是因为React这类库允许我们以 state 函数的形式来描述界面，Redux 通过 action 的形式来发起 state 变化。所以Redux和React结合起来使用会很好。

安装

基于npm做包管理
npm install --save redux
我们可以认为redux就是一些commonJs模块的集合。这些模块就是我们在使用 Webpack、Browserify、或者 Node 环境时引入的。
当然也可以不使用模块打包工具。redux 的 npm 包里 dist 目录包含了预编译好的生产环境和开发环境下的 UMD 文件。可以直接使用，而且支持大部分流行的 JavaScript 包加载器和环境。比如，我们可以直接在页面上的 <script> 标签 中引入 UMD 文件，也可以让 Bower 来安装。UMD 文件可以让你使用 window.Redux 全局变量来访问 Redux。

Redux的三个原则：

• 单一数据源
  整个应用的 state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store中。
• State 是只读的
  唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来执行修改
  为了描述 action 如何改变 state tree ，你需要编写 reducers。

Redux 应用只有一个单一的 store

• 当需要拆分数据处理逻辑时，应该使用 reducer 组合而不是创建多个 store。

Redux 架构的设计核心：严格的单向数据流。

• 这意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。

Redux 应用中数据的生命周期遵循下面 4 个步骤

• 调用 store.dispatch(action)，action就是描述发生了什么的普通对象，可在任意地方调用
• Redux store 调用传入的 reducer 函数。Store会把两个参数传入 reducer: 当前的 state 树和 action。
  reducer 是纯函数,它仅仅用于计算下一个 state。它应该是完全可预测的：多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作，如 API 调用或路由跳转。这些应该在 dispatch action 前发生。
• 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
• Redux store 保存了根 reducer 返回的完整 state 树。