Redux 原理和簡單實現

zhanglearning發表於2021-05-28
Redux

前端開發中React + Redux 是大部分專案的標配，Redux也是我喜歡的庫之一，他的原始碼也拜讀過幾遍，每次都有很多收穫，尤其他的中介軟體設計模式，對自己封裝一些庫提供了思想上的指導。

Redux工作流程如下圖：

 

 

 

 

程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>

  function compose(middlewares) {
    // 相當於fn1(fn2(fn3(...ages)))
    // 所以中介軟體是從右到左執行
    return middlewares.reduce((a, b) => (...args) => a(b(...args)));
  }

  function createStore(reducers, middlewares) {
    const currentState = {};
    let dispatch = function (action) {
      Object.keys(reducers).forEach(function (key) {
        currentState[key] = reducers[key](currentState[key], action);
      })
    }

    function getState() {
      return currentState;
    }

    if (middlewares) {
      // 通過閉包，把當前的dispatch, getState傳遞到中介軟體中
      // (action, ...args) => dispatch(action, ...args) 這裡需要使用函式實時獲取dispatch, 可以理解為next等價
      const chain = middlewares.map(middleware => middleware((action, ...args) => dispatch(action, ...args), getState))
      // 傳遞dispatch標識next
      dispatch = compose(chain)(dispatch);
    }

    dispatch({type: 'INIT'});
    return {
      dispatch,
      getState
    }
  }

  // log 中介軟體
  function logMiddleware(dispatch, getState) {
    return function (next) {
      return function (action) {
        console.log(`當前的age: ${getState().userInfo ? getState().userInfo.age : null}, 將要更新age為：${JSON.stringify(action)}`);
        return next(action);
      }
    }
  }

  // thunk 中介軟體可以非同步請求
  function thunkMiddleware(dispatch, getState) {
    return function (next) {
      return function (action) {
        if (typeof action === 'function') {
          return action(dispatch, getState);
        }
        return next(action);
      }
    }
  }

  const store = createStore({
    userInfo: function (prevState = {age: 1, name: 'initName'}, action) {
      switch (action.type) {
        case 'SET':
          return {...prevState, ...action.value};
        default:
          return prevState;
      }
    }
  }, [thunkMiddleware, logMiddleware]);

  console.log('init', store.getState().userInfo.name, store.getState().userInfo.age);

  store.dispatch({type: 'SET', value: {age: 18}});

  store.dispatch(function (dispatch, getState) {
    // 模擬非同步請求
    setTimeout(function () {
      dispatch({type: 'SET', value: {age: getState().userInfo.age + 1}})
    }, 2000);
  });

  console.log(store.getState().userInfo.name, store.getState().userInfo.age);

  store.dispatch({type: 'SET', value: {name: 'xiaoLi'}});

  console.log(store.getState().userInfo.name, store.getState().userInfo.age);

  setTimeout(function () {
    console.log(store.getState().userInfo.name, store.getState().userInfo.age);
  }, 2000);

</script>
</body>
</html>

 

相關文章