Redux全面掌握

@TODO 待完善

用途

做为状态容器，提供对状态的查询、改变进行管理。
从具体操做 -> 状态变动 -> 触发视图更新，这一单向数据流的控制，不只使得对状态变化的过程变得可控，同时解耦了数据M和视图V。

设计思想

1）web应用是一个状态机，视图和状态一一对应；
2）全部状态保存在一个对象内。

三大原则

单一数据源

state状态对象由store负责存储获取管理；
state为不可变对象（immutable data），保证每次返回一个新的状态对象。

state只读

action是改变状态对象state的惟一方式；
action由dispatch函数触发，其描述了一种行为其常见形式；

{
 type: 'actionType',   //行为
 payload: {}   //须要传递的信息
}

payload是更新store数据的惟一来源。

reducer是纯函数

type Reducer<S, A> = (state: S, action: A) => S

对action作出响应的响应，返回新的状态对象state（保证可回溯的缘由），不该该产生反作用；
生成新的state有以下几种方式：

- Object.assign({}, oldState, newState);
- {...oldState, 更新值}
- Immutable

javascript中的基本类型：Boolean、Number、String、Null、undefined、Symbol等都是不可变的（Immutable），只有Object是可变的（Mutable）.

store提供的方法：

subscribe

用于订阅事件，每次state变动后，都会触发其订阅的事件。
这里能够处理state -> props，以此更新视图组件的更新渲染（react-redux的connect就是这么实现的）；

dispatch

• 处理同步action

//该方法用于生成action 
let actionCreator = (name) => ({ type: 'ADD_ITEM', payload: { name } });
//生成action
dispatch(actionCreator('M2'));

• 处理异步

1）redux-thunk
其经过扩展action，使得actionCreator返回一个function做为action。

let asyncActionCreator = postTitle => (dispatch, getState) => {
    dispatch(requestPosts(postTitle));
    return fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
        .then(json => dispatch(receivePosts(postTitle, json)));
    };
};
//这里须要使用middleware支持异步，例如redux-thunk
var thunkMiddleware = function ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            //若是是function，则传递dispatch、getState，并执行
            return typeof action === 'function' ?
            //原始的dispatch
            action(dispatch, getState) :
            next(action)
        }
    }
}
//使用1
store.dispatch(fetchPosts('xx'));
// 使用2：注意上面dispatch后返回的Promise，能够在dispatch异步数据，reducer处理后，作一些处理 
store.dispatch(fetchPosts(genPromise)).then(() => console.log(store.getState()) );

thunk的应用：延迟执行、异步控制。做为Generator的next()的返回值，Thunk和Promise都是Generator自动执行的解决方案。

2）redux-sage

dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})

redux-saga是一个 redux 中间件;
使用了 ES6 的 Generator 功能

redux-sage相较于redux-thunk的优点：

• 不改动action；

• Generator同步的写法，实现异步流程的控制管理；

  注意： let res = yield call('xx');, res的值为next(val)传入的参数，而不是yield后面的表达式！
  Generator经过 yield和 next来传递数据来控制函数的内部流程( 内外部的双向通讯)。

• 单独的文件组织，便于测试维护；

中间件

洋葱圈模型，和KOA的中间件原理相似；
在action真正处理前，赋予诸如日志记录等能力。

使用场景

1）应用复杂，利于代码结构的组织；2）全局状态共享；3）可能被共享和改变的组件状态。