[Redux/Mobx] 說說Redux的實(shí)現(xiàn)流程

通過分析redux的幾個(gè)核心api，來看如何實(shí)現(xiàn)redux

• store.subscribe: 訂閱數(shù)據(jù)的變化
• store.dispatch：dispatch后改變state,同時(shí)通知store.subscribe函數(shù)執(zhí)行，上面這兩個(gè)函數(shù)可以利用發(fā)布-訂閱模式
• store.getState: 通過這個(gè)函數(shù)直接返回內(nèi)存中的state變量即可
  簡(jiǎn)單的實(shí)現(xiàn)如下

export function createStore(reducer, enhancer) {if (enhancer && typeof enhancer === 'function') {const newCreateStore = enhancer(createStore);const newStore = newCreateStore(reducer);return newStore;}let state; // state記錄所有狀態(tài)let listeners = []; // 保存所有注冊(cè)的回調(diào)function subscribe(callback) {listeners.push(callback); // subscribe就是將回調(diào)保存下來}// dispatch就是將所有的回調(diào)拿出來依次執(zhí)行就行function dispatch(action) {state = reducer(state, action);for (let i = 0; i < listeners.length; i++) {const listener = listeners[i];listener();}}// getState直接返回statefunction getState() {return state;}// store包裝一下前面的方法直接返回const store = {subscribe,dispatch,getState}return store; }export function combineReducers(reducerMap) {const reducerKeys = Object.keys(reducerMap); // 先把參數(shù)里面所有的鍵值拿出來// 返回值是一個(gè)普通結(jié)構(gòu)的reducer函數(shù)const reducer = (state = {}, action) => {const newState = {};for (let i = 0; i < reducerKeys.length; i++) {// reducerMap里面每個(gè)鍵的值都是一個(gè)reducer，我們把它拿出來運(yùn)行下就可以得到對(duì)應(yīng)鍵新的state值// 然后將所有reducer返回的state按照參數(shù)里面的key組裝好// 最后再返回組裝好的newState就行const key = reducerKeys[i];const currentReducer = reducerMap[key];const prevState = state[key];newState[key] = currentReducer(prevState, action);}return newState;};return reducer; }// 參數(shù)支持多個(gè)中間件 export function applyMiddleware(...middlewares) {function enhancer(createStore) {function newCreateStore(reducer) {const store = createStore(reducer);// 多個(gè)middleware，先解構(gòu)出dispatch => newDispatch的結(jié)構(gòu)const chain = middlewares.map(middleware => middleware(store));const { dispatch } = store;// 用compose得到一個(gè)組合了所有newDispatch的函數(shù)const newDispatchGen = Redux.compose(...chain);// 執(zhí)行這個(gè)函數(shù)得到newDispatchconst newDispatch = newDispatchGen(dispatch);return {...store, dispatch: newDispatch}}return newCreateStore;}return enhancer;}

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[Redux/Mobx] 说说Redux的实现流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。