redux原理入门

[iscarecrow]

不考虑中间件情况,流程如下

• dispatch触发action的过程。
• 循环rootReducers(currentReducer)，执行所有reducer函数
• 将storeTree每个prevState和action丢入reducer,如果匹配action.type返回新的nextState并且挂在到storeTree

注意事项

• reducer函数newState返回使用Object.assign()。(shadowCopy),复杂嵌套的json要拆分reducer
• 由于loop了所有redcuers(combineReducers返回的fn)，注意非目标页面的数据出错或者改动，对目标页面是有影响的

action->dispatch->reducers

中间件问题

• applyMiddleware (理解不够) how to work???
• compose (fp 代码组合)

以 redux-thunk为例

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
  // execute fn until action is object
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

action->dispatch->middleware->reducers

redux-thunk work to work?

// fn -> fn -> fn -> obj  execute fn(dispatch,getState,extraArgument)

// return function
function fetchA(){
	return dispatch => dispatch(fetchAdata())
}

// return function
functionAdata() {
	return dispatch => {
		return fetch('url').then(
			json => dispatch(receiveA(json))
		)
	}
}

// return object
function receiveA(json){
	return {
		type: types.xxxxxx
		json:json
	}
}

所以 asyncAction是在 actionCreator完成的。等待异步完成拿到action(object)后，触发dispatch

如何实现一个中间件

• action {type:'xxx',....data}
• next dispatch?

function createlogMiddleware() {
  return ({ getState }) => next => action => {
	// doAnyThing u what
	console.log('action');
    return next(action)
  }
}

QA

• applyMiddleware???

参考资料

• redux source code
• redux-thunk source code