2017.08.26

Check Out

New

Redux

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

Redux 主要适用于Web应用中，用于集中管理复杂的应用数据。核心概念 有：

• 应用的所有数据都存放在 State 的数据结构中，而 State存放在 Store中
• 应用从 Store 中读取 State
• store 永远都不会直接被修改
• action 描述发生了什么，由用户触发（可以理解为事件）
• 通过调用一个 reducer 函数结合旧的 state 和 action 来更新 state

1. 自己应用这些核心概念来实现一个 迷你 Redux

import Component from 'react';
// 应用的所有数据都存放在 **State** 的数据结构中，而 **State**存放在 **Store**中
// store 永远都不会被直接修改
class Store {
    constructor(reducer, state) {
        this._state = state || null;
        this._reducer = reducer;
        this._listeners = [];
    }
    dispatch: (action) => {
        this._state = this._reducer(this._state, action);
        this.listeners.forEach(listener => listener());
    },
    getState: () => this._state ,
    subscribe: (listener) => {
        this._listeners.push(listener);
        return () => {
            this._listeners = this._listeners.filter(l => l !== listener);
        }
    }
};
// reducer
const counter = (preState, action) => {
    switch(action.type) {
        case 'INCREMENT':
            return {num: preState.num + 1};
        case 'DECREMENT':
            return {num: preState.num - 1};
        default:
            return preState;
    }
};

const plusStore = new Store(counter, {num:0});

class Plus extends Component {
    constructor() {
        super()
        this.state = plusStore.getState(); // 应用从 store 中读取 state
    }
    // 事件分发，通过调用一个叫 reducer 的函数结合旧的 state 和 action 来更新 state
    dispatch(action) {
        plusStore.dispatch(action);
        this.setState(plusStore.getState());
    }
    // action 描述发生了什么，由用户触发
    increment() {
        this.dispatch({type: 'INCREMENT'});
    }
    decrement() {
        this.dispatch({type: 'DECREMENT'});
    }
    render() {
        return (
            <div>
                <button onClick={ this.decrement }>-</button>
                <p> {this.state.num} </p>
                <button onClick={ this.increment }>+</button>
            </div>
        )
    }
}

理解核心概念

• reducer（归集器／折叠）：一个接受旧值返回新值的纯函数。（所以说不会修改当前的state，不会使用参数之外任何的数据）
• action（动作）：一个描述事件详细的对象，必须要定义 type 字段用来区分类型, 还可以选择是否附上改变应用状态的数据。
• store（存储）：一个存储应用组件状态数据的对象，所以不能被直接修改。
• dispatch（分发）：一个用于将 action 分发给 reducer 处理的函数。