其实,redux的核心概念就是store、action、reducer,我们项目中经常用到的,其实把这些灵活运用基本上对react的理解更深刻。
其实如果你想更系统化的了解关于这方面的知识,建议去参考DvaJS因为我觉得很多人像我一样比较懒 喜欢看图,233333 那么我也用3d画图软件做了一个关系图(超级简陋)。
强迫症患者建议不要盯着线条~看。
store
对flux有了解的同学应该有所了解,store在这里代表的是数据模型,内部维护了一个state变量,用例描述应用的状态。store有两个核心方法,分别是getState、dispatch。前者用来获取store的状态(state),后者用来修改store的状态
// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefined
var store = redux.createStore(reducer, []);
// 通过 store.getState() 可以获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: ' + store.getState()); // state is:
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state 的方法,就是通过 store.dispatch(action)
store.dispatch({type: 'BXSB', text: '不想上班'});action
对行为(如用户行为)的抽象,在redux里是一个普通的js对象。redux对action的约定比较弱,除了一点,action必须有一个type字段来标识这个行为的类型。所以,下面的都是合法的action
{type:'BXSB', text:'不想上班'}
{type:'BXSB', text:'上班想划水'}
{type:'BXSB', text:'不想上班想划水', time:'凌晨1点'}
reducer
一个普通的函数,用来修改store的状态。传入两个参数 state、action。其中,state为当前的状态(可通过store.getState()获得),而action为当前触发的行为(通过store.dispatch(action)调用触发)。reducer(state, action) 返回的值,就是store最新的state值。
// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'BXSB'}
// 返回值: 新的state
var reducer = function(state, action){
switch (action.type) {
case 'BXSB':
return state.concat(action.text);
default:
return state;
}
};本人对自我评价是停留在幼儿园阶段的前端开发,希望能与大家多沟通交流,共同进步!