標簽： 源碼解析,前端
Redux
1. Reducer
combineReducers
將多個reducer 合并成一個reducer . 在后面store處理中. 可以直接是操作這個合并的reducer ,而不用操作多個reducer..每個reducer 處理返回的state 存儲在store 的state 以reducer名稱為key.
2. Store
createStore
維護一個state.這個state 是redux 的state 跟react 的state 不同.同時提供了幾個方法:
getState(): 返回當前的state
subscribe(): 監(jiān)聽state 的變化
dispatch(): 當用戶發(fā)起一個action會使用這個方法將action 傳遞給reducer.
同時對注冊的監(jiān)聽器進行回調(diào).
replaceReducer: 替換Reducer
3.Action
bindActionCreator
將我們生成action 的方法跟dispatch方法連接起來.
例如. 有一個生成actionB 的方法createActionB .
通過 bindActionCreator 會生成方法新的createActionB .新的會代理上面的createActionB然后將生成的actionB 使用dispatch派發(fā)出去.
4.Middleware
applyMiddleware
這應(yīng)該是redux 中最有意思的一個方法.
通過使用createStore 生成一個store和dispatch
當用戶的action發(fā)起以后會先經(jīng)過middlewares ,先被middlewares處理, 然后處理過的action再被上面dispatch處理掉.
通過中間件我們可以做特別有意思的意思, 比如日志跟蹤,時光旅行,異步action
這里主要是用一個dispatch 來代理store的dispatch 方法.來實現(xiàn)中間件的功能.
react-redux
connect
mapStateToProps: 將redux 的state 轉(zhuǎn)換成props
mapDispatchToProps: 主要用于將action和dispatch 連接起來然后放置在props 中
mergeProps: 講上面的兩個生成的props 和connect 自己的props 合并在一起傳遞給子控件.
connectAdvanced:
該方法在 redux 5.0 加入.
看這個方法名可以看出這個是connect 的高階版. 有更自由的定制.和更好的擴展. 比方說指定特定的store,然后更靈活的組合props.
從可以指定特定store上可以看出.官方開始擁抱多store 的方案.
Provider
這是一個Component 所以它有Component 有的生命周期. 這個的作用其實就是將redux 生成的store 傳遞到下面的Component.界面的渲染交給他的子類來處理.
tip:
store 的state 和react 中的state 在react-redux 中的關(guān)系.
在react-redux 3.0 中 store 的state 存儲在react 的state 中以storeState 為key.
在react-redux 4.0 中store 的state 直接存儲在react 的state , 這里可以把這兩個當成同一個東西.
在react-redux 5.0 中store 的state 已經(jīng)從react 的state 中剝離出來.
react-thunk
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
這是redux 的中間件. 主要的功能是擴展你的action. 他支持你返回一個function 類型的action. 在中間件的時候調(diào)用你的function 并返回可以被Reducer 處理的action.
尾巴
redux ,react-redux ,react-thunk 源碼還是簡單的.但是里面的思想還是值得我們?nèi)ネ魄?琢磨.
