Redux - 入门学习

1.Redux简介

2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。

2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

Redux 是一个改变状态(state)的模型，这个模型通过一个单向操作的方式来改变状态。

Redux 和 React 完全解耦，并不是 Redux 非得和 React结合才能使用，而只是 React 结合 Redux 会事半功倍。

Redux 作为一个专门关联 state 的框架应用而生，而这种单向数据流的思想也让 Redux 成为一个现代框架。

2.Redux的基本结构

结构说明：
Redux的三个非常重要的组成部分：

• action
• reducer
• store

action 通知 reducer 修改 state，store 管理 state。

1.首先，用户发出 Action。

store.dispatch(action);

2.然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action);

3.State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

4.listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

3. Redux 设计思想

Redux 的设计思想很简单，就两句话。

1. Web 应用是一个状态机，视图与状态是一一对应的。
2. 所有的状态，保存在一个对象里面。

4.Redux三大原则

Redux 有三大原则：

• 单一数据源
• state 只读
• 只用纯函数来修改

4.1单一数据源

整个应用的 state 都是保存在一个对象树中，而且这个对象树存在唯一一个 store。这个 store 我们通过redux.createStore创建，通过store.getState()获取.

4.2 state 只读

改变 state 只能通过 dispatch 一个 action 才能修改。

action 其实就是一个简单对象，其中type是必填项，以便 区分是哪一个 action。

store.dispatch({
  type: 'ALL'
});

为了方便给 action 传递数据，一般来说我们会把上边参数对象封装成方法。如：

const create = (item)=> {
    return {
        type: 'CREATE',
        item
    }
}

即便在小的功能也得这样修改 state。比如实现表单的双向绑定。我们给一个input绑定一个在onChange事件，然后在onChange里拿到当前的 value，dispactch 一个 action 通知 reducer 改变给当前 dom 绑定的state(根据props传递)，这样才能实现双向绑定。

4.3 使用纯函数来执行修改

何为纯函数？

简单来说就是函数的输出完全由输入所决定，运行过程不依赖于系统的状态和上下文环境，运行过程不改变它作用域之外的环境状态。

这个纯函数在 Redux 里叫做 Reducer，它接收先前的 state 和 action，并返回一个新的 state，由于它是纯函数，所以它的结果是可预测的，这样为编写单元测试创造了条件。

5.Redux 使用场景

如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

• 用户的使用方式非常简单
• 用户之间没有协作
• 不需要与服务器大量交互，也没有使用 WebSocket
• 视图层（View）只从单一来源获取数据

上面这些情况，都不需要使用 Redux。

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

上面这些情况才是 Redux 的适用场景：多交互、多数据源。