React-Redux-优化

在上一篇 React-Redux-基本使用 的文章当中其实是存在问题的主要问题有以下几点：

1. store、action、reducer 代码都写在一个文件中，不利于维护(后续文章解决)
2. action 和 reducer 中都是使用字符串来指定和判断操作类型，写错不报错(本文当中进行解决)
3. action 中的操作写死了，不够灵活(本文解决)

第二点的解决方案可以利用常量解决，第三点的解决方案可以利用函数解决，优化之后的代码如下：

const redux = require('redux');

const ADD_COUNT = 'ADD_COUNT';
const SUB_COUNT = 'SUB_COUNT';

// 定义一个状态
let initialState = {
    count: 0
};

// 利用store来保存状态（state）
const store = redux.createStore(reducer);

// 利用action来修改状态
const addAction = (num) => {
    return {type: ADD_COUNT, num: num};
};
const subAction = (num) => {
    return {type: SUB_COUNT, num: num};
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

监听状态的改变

store.subscribe(() => {
    console.log(store.getState());
});

从 Store 中获取存储的状态

console.log(store.getState());

修改 Store 中存储的状态

store.dispatch(addAction(5));
store.dispatch(subAction(5));