作者:Jogis
原文链接:https://github.com/yesvods/Blog/issues/7
转载请注明原文链接以及作者信息
第一篇介绍的是redux作为状态容器的核心思想,由state
初始化,到action
被分发而改变状态。之后的扩展都是围绕核心思想展开,也正得益于函数式编程等其他扩展,redux成为目前最流行的react状态管理框架。
store
redux里面,store实例拥有四个方法:getState
,dispatch
,subscribe
,replaceReducer
。
其中前两个是store的核心方法,分别用于获取状态以及改变状态。subscribe
用于订阅状态更改事件,每当store的状态改变后,订阅的函数就会被调用。replaceReducer
用于替换创建store的reducer,比如从页面A跳转到页面B后,仅仅需要替换reducer就可以让B页面使用所需的状态,在按需加载状态时候非常有用。
精简后的store创建代码非常简单:
function createStore(reducer,initialState){ let currentState = initialState; return { getState: () => currentState,dispatch: action => { currentState = reducer(currentState,action) } } }
reducer
reducer
是一个简单的纯函数(currentState,action) => nextState
接收现在的状态以及action
作为参数,根据action
的类型以及信息,对state
进行修改,返回最新的state
。
比如一个动物园有猫和狗,现在需要添加一些猫猫狗狗:
function cat(state = [],action){ if(action.type === constant.ADD_CAT){ state.push(action.cat); return state; }else { return state; } } function dog(state = [],action){ if(action.type === constant.ADD_DOG){ state.push(action.dog); return state; }else { return state; } }
//添加Tom猫 dispatch({ type: constant.ADD_CAT,cat: { name: 'Tom' } }); //添加Jerry狗 dispatch({ type: constant.ADD_DOG,dog: { name: 'Jerry' } });
之前提及到的是单一数据源原则,一个应用应该只有一个数据源(state),但是一个reducer会产生一个state
,那怎么把猫狗两个reducer合成一个呢。redux提供了工具函数combineReducers
,把多个reducre进行结合。我们可以编写多个reducer函数,每个函数只专注于自己的状态修改(比如cat函数,只专注于对cat
这个状态的修改,不管dog
的状态)。
而且,通过combineReducers
合成一个reducer后,可以继续使用combineReducers
把合成过的reducers进行再次合成,这样就非常方便地产生一个应用状态树,这也是为什么reducr仅仅需要一个数据源,便可以管理大型应用整个状态的原因。
比如:
//homeAnimals就成为一个reducers const homeAnimals = combineReducers({cat,dog});
// nextState: // { // cat: [{...}],// dog: [{...}] // } const nextState = homeAnimals(state,action);
更高层级的状态树:
cons zoo = combineReducers(homeAnimals,otherAnimals);
// nextState: // { // homeAnimals: {...},// otherAnimals: {...} // } const nextState = zoo(state,action);
合成的reducerzoo
就会产生更深嵌套的状态树。
未完待续...
原文链接:https://www.f2er.com/react/307189.html