在上一篇 React-Redux-基本使用 的文章当中其实是存在问题的主要问题有以下几点:
- store、action、reducer 代码都写在一个文件中,不利于维护(后续文章解决)
- action 和 reducer 中都是使用字符串来指定和判断操作类型,写错不报错(本文当中进行解决)
- 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));