[Redux/Mobx] 說說Redux的實現流程

通過分析redux的幾個核心api，來看如何實現redux

• store.subscribe: 訂閱數據的變化
• store.dispatch：dispatch后改變state,同時通知store.subscribe函數執行，上面這兩個函數可以利用發布-訂閱模式
• store.getState: 通過這個函數直接返回內存中的state變量即可
  簡單的實現如下

export function createStore(reducer, enhancer) {if (enhancer && typeof enhancer === 'function') {const newCreateStore = enhancer(createStore);const newStore = newCreateStore(reducer);return newStore;}let state; // state記錄所有狀態let listeners = []; // 保存所有注冊的回調function subscribe(callback) {listeners.push(callback); // subscribe就是將回調保存下來}// dispatch就是將所有的回調拿出來依次執行就行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); // 先把參數里面所有的鍵值拿出來// 返回值是一個普通結構的reducer函數const reducer = (state = {}, action) => {const newState = {};for (let i = 0; i < reducerKeys.length; i++) {// reducerMap里面每個鍵的值都是一個reducer，我們把它拿出來運行下就可以得到對應鍵新的state值// 然后將所有reducer返回的state按照參數里面的key組裝好// 最后再返回組裝好的newState就行const key = reducerKeys[i];const currentReducer = reducerMap[key];const prevState = state[key];newState[key] = currentReducer(prevState, action);}return newState;};return reducer; }// 參數支持多個中間件 export function applyMiddleware(...middlewares) {function enhancer(createStore) {function newCreateStore(reducer) {const store = createStore(reducer);// 多個middleware，先解構出dispatch => newDispatch的結構const chain = middlewares.map(middleware => middleware(store));const { dispatch } = store;// 用compose得到一個組合了所有newDispatch的函數const newDispatchGen = Redux.compose(...chain);// 執行這個函數得到newDispatchconst newDispatch = newDispatchGen(dispatch);return {...store, dispatch: newDispatch}}return newCreateStore;}return enhancer;}

個人簡介

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

主目錄

與歌謠一起通關前端面試題

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。