react+redux项目如何对state进行初始化
最近在学习redux,对照着官网的示例学习,总有些不明白的地方,所以研究了一下redux源码,主要针对combineReducers、createStore进行分析 具体执行函数请参照test.js,可将该文中的所有内容直接拷贝到Babel中,通过打印出的内容了解执行逻辑。 redux的工作原理: 1. reducers每个传入combineReducers的 reducer都需要满足以下规则: 在reducer里不能做如下操作: //reducer1 const selectedReddit = (state = 'frontend',action) => { switch(action.type){ case 'SELECT_REDDIT': return action.reddit default return state } } //reducer2 const postsByReddit = (state = { },action) => { switch (action.type) { case INVALIDATE_REDDIT: case RECEIVE_POSTS: case REQUEST_POSTS: return { ...state,//doSomething } default: return state } } 通过combineReducers可以将多个reducer合并到一起 2. combineReducersfunction combineReducers(reducers){ var reducerKeys = Object.keys{reducers} var finalReducers = {} //将 key对应的对象不是function的reducer过滤掉 for(var i=0; i < reducerKeys.length; i++){ var key = reducerKeys[i] if(NODE_ENV !== 'production'){ if(typeof reducers[key] === 'undefined'){ warning( `No reducer provided for key "${key}"` ) } } if(typeof reducers[key] === 'function'){ finalReducers[key] = reducers[key] } } //typeof reducer === 'function' var finalReducerKeys = Object.keys(finalReducers) //combineReducers({})执行后,返回combination方法,执行该方法,返回一个合成state对象,state对象的结构由传入的多个reducer的key决定 // state对象的结构: {reducerName1: state1,reducerName2: state2} return function combination(state = {},action){ if (sanityError){ throw sanityError } if(NODE_ENV !== 'production'){ var warningMessage = getUnexpectedStateShapeWarningMessage(state,finalReducers,action,unexpectedKeyCache) if (warningMessage){ warning(warningMessage) } } var hasChanged = false var nextState = {} for(var i = 0; i < finalReducerKeys.length; i++){ var key = finalReducerKeys[i] var reducer = finalReducers[key] var previousStateForKey = state[key] var nextStateForKey = reducer(previousStateForKey,action) if(typeof nextStateForKey === 'undefined'){ var errorMessage = getUndefinedStateErrorMessage(key,action) throw new Error(errorMessage) } nextState[key] = nextStateForKey hasChanged = hasChanged || nextStateForKey !== previousStateForKey } return hasChanged ? nextState : state } } 3. createStore通过dispatch(action)执行reducer,通过switch判断该执行哪种操作。 通过getState()获取应用当前state function createStore(reducer,preloadedState,enhancer){ if(typeof preloadedState === 'function' && typeof enhancer === 'undefined'){ enhancer = preloadedState preloadedState = undefined } var currentReducer = reducer var currentState = preloadedState var currentListeners = [] var nextListeners = currentListeners var isDispatching = false function getState(){ return currentState } function dispatch(action){ try{ isDispatching = true console.log(` >>>>>>>>>>>>执行combination start<<<<<<<<<<`); currentState = currentReducer(currentState,action) console.log(` >>>>>>>>>>>>执行combination end,当前state: '${JSON.stringify(currentState)}' <<<<<<<<<<<<`); }finally{ isDispatching = false } var listeners = currentListeners = nextListeners for(var i=0; i < listeners.length; i++){ var listener = listeners[i] listener() } return action } console.log(` >>>>>>>>>>>>>>>>>>>>>初始化state,执行dispatch,start<<<<<<<<<<<<<<<<<<`); dispatch({ type: ActionTypes.INIT }) console.log(` >>>>>>>>>>>>>>>>>>>>>初始化state,执行dispatch,end<<<<<<<<<<<<<<<<<<`); return { dispatch,getState } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |