angular 使用Redux

Redux 笔记

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

可让你构建一致化的应用，运行于不一样的环境（客户端、服务器、原生应用），而且易于测试。不只于此，它还提供 超爽的开发体验，好比有一个时间旅行调试器能够编辑后实时预览。

Redux 除了和 React 一块儿用外，还支持其它界面库。 它体小精悍（只有2kB）且没有任何依赖。

函数式编程思想

函数式编程是把一个功能的一个操做和相关数据封装在一块儿，函数式编程是函数满天飞。(面向对象是把一个功能的一组操做和相关数据封装在一个对象里，面向对象是对象满天飞。)

函数不访问全局变量，也不改变全局变量。(函数式编程的准则：函数不受外部变量影响，不依赖于外部变量，也不改变外部变量的值。)

函数式编程关心数据的映射，命令式编程关心解决问题的步骤.

特色

1. 函数是"第一等公民"

  所谓"第一等公民"（first class），指的是函数与其余数据类型同样，处于平等地位，能够赋值给其余变量，也能够做为参数，传入另外一个函数，或者做为别的函数的返回值。

举例来讲，下面代码中的print变量就是一个函数，能够做为另外一个函数的参数。

2. 只用"表达式"，不用"语句"

"表达式"（expression）是一个单纯的运算过程，老是有返回值；"语句"（statement）是执行某种操做，没有返回值。函数式编程要求，只使用表达式，不使用语句。也就是说，每一步都是单纯的运算，并且都有返回值。

缘由是函数式编程的开发动机，一开始就是为了处理运算（computation），不考虑系统的读写（I/O）。"语句"属于对系统的读写操做，因此就被排斥在外。

固然，实际应用中，不作I/O是不可能的。所以，编程过程当中，函数式编程只要求把I/O限制到最小，不要有没必要要的读写行为，保持计算过程的单纯性。

3. 没有"反作用" -- 不会修改外部变量

所谓"反作用"（side effect），指的是函数内部与外部互动（最典型的状况，就是修改全局变量的值），产生运算之外的其余结果。

函数式编程强调没有"反作用"，意味着函数要保持独立，全部功能就是返回一个新的值，没有其余行为，尤为是不得修改外部变量的值。

4. 不修改状态

上一点已经提到，函数式编程只是返回新的值，不修改系统变量。所以，不修改变量，也是它的一个重要特色。

在其余类型的语言中，变量每每用来保存"状态"（state）。不修改变量，意味着状态不能保存在变量中。函数式编程使用参数保存状态，最好的例子就是递归。下面的代码是一个将字符串逆序排列的函数，它演示了不一样的参数如何决定了运算所处的"状态"。

5. 引用透明

引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或"状态"，只依赖于输入的参数，任什么时候候只要参数相同，引用函数所获得的返回值老是相同的。

有了前面的第三点和第四点，这点是很显然的。其余类型的语言，函数的返回值每每与系统状态有关，不一样的状态之下，返回值是不同的。这就叫"引用不透明"，很不利于观察和理解程序的行为。

咱们为何要使用Redux，什么是Redux？

理解Redux

view ---> action ---> reducer ---> store(state) ---> view

若是放入一个web app中，首先store(state)决定了view，而后用户与view的交互会产生action，这些action会触发reducer于是改变state，而后state的改变又形成了view的变化。

Action

Action 的任务是描述“发生了什么事情？” 

Actions 是把数据从应用传到 store 的有效载荷。它是 store 数据的惟一来源。用法是经过 store.dispatch() 把 action 传到 store。

Action就像leader，告诉咱们应该作哪些事，而且给咱们提供‘资源’，真正干活的是苦逼的Reducer。

Reducer

Reducer 的任务是根据传入的 Action 对象去修改状态树。Reducer 是一个普通的回调函数。当它被Redux调用的时候会为他传递两个参数State 和 Action。

或者简单地讲 Reducer 就是一个纯函数， 根据传入的 当前state 和 action ，返回一个新的 state ：(state, action) => newState

小结：

Reducer很简单，但有三点须要注意

1. 不要修改 state。
2. 在 default 状况下返回旧的 state。遇到未知的 action 时，必定要返回旧的 state。
3. 若是没有旧的State，就返回一个initialState，这很重要！！！

Store

能够把Store想象成一个数据库（如Redis同样），就像咱们在移动应用开发中使用的SQLite同样，Store是一个你应用内的数据（状态）中心。一个应用只有一个Store

Store中通常负责：保存应用状态、提供访问状态的方法、派发Action的方法以及对于状态订阅者的注册和取消等。任什么时候间点的Store的快照均可以提供一个完整当时的应用状态。

Store 就是把 Reducer 和 action 联系到一块儿的对象。Store 有如下职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 经过 subscribe(listener) 注册监听器；

 

Redux 流程图 

Redux是什么？

全局的、惟一的、不可改变的内存状态[数据库]

reducer是一个纯函数，能够接收到“任何”Action

reducer 不改变状态，只返回新的状态

Reducer 是一个形式为 (state,action) => state 的纯函数,描述了action如何把state转变成下一个state。

reduce、map、filter 等方法是函数式编程中经常使用的数组处理方法

Action是个JavaScript对象，它是store数据的惟一来源

编写reduce技巧

每一个reducer模块默认export自身的纯函数。若是每个模块export同样名称的reducer将很难阅读。能够经过* as 自定义昵称方便代码的可读性。以下修改：

    /**
 * 分别从每一个 reducer 中将须要导出的函数或对象进行导出，并起个易懂的名字  */ import * as fromQuote from './quote.reducer'; import * as fromAuth from './auth.reducer'; import * as fromProjects from './project.reducer'; import * as fromTaskLists from './task-list.reducer'; import * as fromTasks from './task.reducer'; import * as fromUsers from './user.reducer'; import * as fromTheme from './theme.reducer';