Redux核心概念

React Native开发大型项目处理数据流基本上用到了Redux。

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它短小精悍（只有2kb）。

项目中安装Redux：

npm install --save redux

其他附加库：

npm install --save react-redux
npm install --save redux-watch #状态监听

基本概念：

1.Store，容器，水池，保存数据的地方，一个应用只能有一个Store。Redux提供createStore函数，创建Store。

import {createStore} from 'redux';
const store = createStore(fun);

注意，createStore函数的参数为一个函数，该函数我们称之为Reducer，后面会讲到。

2.State，水池的状态，数据状态。Store在某一时刻的状态，可以通过store.getState()获取到。

const state = store.getState();

注意，在Redux里，一个状态（State）对应一个视图（View），State一样，View就相同。

3.Action，类似于（向水池中打水漂的）砖头，实际上是一个JSON对象，该对象必须包含type属性，表示Action的名称。

const action = {
    type: 'ADD',
    val: 5
};

上面代码中，Action的名称为ADD，携带的信息是5。该Action表示为一个数据加上5。

4.Action Creator，Action生成函数，用于创建Action，类似于工厂模式。没有它也可以，后果是你需要写很多的Action。

function createAdd(number) {
    return {
        type: 'ADD',
        val: number
    }
}
const action = createAdd(5);

上面代码中，得到的Action和之前的单独创建的Action具体同样的效果。

5.store.dispatch(action)，View用于触发数据变化的唯一方式，可理解为向水池小抛一块砖头。

import {createStore} from 'redux';
const store = createStore(fun);

store.dispatch({
    type: 'ADD',
    val: 5
});

上面代码中，视图(View)向容器Store中甩进去了一个action，意思就是状态数据增加了5。

6.Reducer，向Store中丢了一个action进去后，Store将会溅起水花，状态也就变了，它的变化遵守着一定的规律函数，该规律函数我们称之为Reducer。比如向一个水池小丢砖块，溅起水花的多少与砖头体积成正函数y=f(x)，该函数即为Reducer。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
    switch (action.type) {
        case 'ADD':
            return state + action.val;
        case 'DEC':
            return state - action.val;
        default:
            return state;
    }
};

// 该函数不需要主动去调用,事实上我们在store.dispatch的时候，会自动触发。
// 事实上前面的Store在创建的时候，就需要传入一个函数，这个函数就是这里的Reducer
const state = reducer(100, {
    type: 'ADD', 
    val: 5
});

注意，这里的reducer不需要主动去调用，我们只需要向容器中丢一块砖头（store.dispatch(action)），它会自动触发该方法。

前面的水池（Store）在创建（createStore(fun)）的时候，需要的函数就是这里的规律函数（Reducer）。

import {createStore} from 'redux';
const store = createStore(reducer); // 前面的fun即为这里的reducer

7.事实上，Reducer是一个纯函数，纯函数的要求之一是不能改写参数，故向水池中抛一块砖头后，平静的水池 和 起水花的水池 在这里只能看作两个不同的水池(State)。意思是你的抛砖头动作太过激烈，而导致创建了一个平行宇宙。

// State 是平静的水池
function reducer(state, action) {
    let newSate = {};   // 水花
    return { ...state, ...newSate}  //起水花的水池
}

8.store.subscribe(listener)，监听函数，一旦有人向水池抛砖头（State变化），守护水池的大爷就出来骂你了（自动执行 listener）。

监听函数会返回一个解除函数，调用该解除函数，就不再监听了。

import { createStore } from 'redux';
const store = createStore(reducer);

let unsubscribe = store.subscribe(listener);  //监听

unsubscribe();  //解除监听

结尾：

要，要，官方Demo来一套...

import { createStore } from 'redux';

/**
 * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你，可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
 * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
 */
function reducer(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + action.val;
        case 'DES':
            return state - action.val;
        default:
            return state;
    }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(reducer);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
    console.log("听到状态变化了：" + store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'ADD', val: 10 });
// 10
store.dispatch({ type: 'ADD', val: 20 });
// 30
store.dispatch({ type: 'DES', val: 30 });
// 0

参考链接：

http://cn.redux.js.org/index.html

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html