Redux原理

吐槽君 分类:javascript

最近看redux原理,发现没有想象中的难以理解,在这里进行总结交流一下,为便于理解,以下源码做了部分简化。

具体代码与详细介绍参见:github.com/dishui1238/…

1. 前言

首先,思考下以下函数如果想要顺序输出 1,2,3,应该如何处理?

function f1() {
  console.log("1");
}
function f2() {
  console.log("2");
}
function f3() {
  console.log("3");
}
 
方法一: f1();f2();f3();
方法二:f3(f2(f1()))
 

对于方法二可以写一个通用函数,可以称作聚合函数,这样就保证了函数的顺序执行。

function compose(...funcs) {
  const len = funcs.length;
  if (len === 0) {
    return (arg) => arg;
  }
  if (len === 1) {
    return funcs[0];
  }
  return funcs.reduce((left, right) => (...args) => right(left(...args)));
}

compose(f1, f2, f3)();
 

这个函数在 redux 中的 applyMiddleware实现时会用到,可以保证中间件的顺序执行。

2. 分析Redux

这部分需要对 Redux 有一定了解,如果你没使用过 Redux ,请先查阅相关文章。

Redux 是 JavaScript 的应用状态容器,它需要以下几个功能:

  • 需要一个数据源—— store 来存储数据
  • 需要reducer 初始化 state 并定义 state 修改规则
  • 如果想要对数据进行修改,需要一个 dispatch 发起 action
  • action 提交到 reducer 函数里,根据传⼊的 action 的 type,返回新的 state
  • Redux 只是个纯粹的状态管理器,默认只支持同步,如果要处理异步,需要使用中间件

3. createStore 的实现

在使用 createStore 后,可以从返回值中获取 getState(),dispatch(),subscribe() 方法,即该函数返回 getState、dispatch、subscribe函数,接收reducer,applyMiddleware() 的返回值 作为参数。

/**
需要实现以下功能:
1. 存储状态 state
2. 获取状态 getState
3. 更新状态 dispatch
4. 变更订阅 subscribe: 通过 subscribe 在 store 上添加一个监听函数。每当调用 dispatch 方法时,会执行所有的监听函数
5. 应用中间件,即 applyMiddleware()
*/

export function createStore(reducer, enhancer) {
  let state = undefined;
  let listeners = [];

// enhancer(可以叫做强化器)是一个函数,这个函数接受一个「普通 createStore 函数」作为参数,返回一个「加强后的 createStore 函数」。这个加强的过程中做的事情,其实就是改造dispatch,添加上中间件。
  // redux 提供的 applyMiddleware() 方法返回的就是一个 enhancer。

  if (enhancer) {
   // 返回加强后的 createStore 函数
    return enhancer(createStore)(reducer);
  }

   function getState() {
    return state;
    }
    function dispatch(action) {
      state = reducer(state, action);
      listeners.forEach((func) => func());
    }
    function subscribe(listener) {
     listeners.push(listener);
    }

  // dispatch一个用于初始化的 action,相当于调用一次 reducer
  dispatch({
    type: "@MYREDUX/SOURCECODE",
  });

 return {
    getState,
    dispatch,
    subscribe,
  };
}
 

4. applyMiddleware 的实现

applyMiddleware 是用来改造 store 自带的 dispatch 方法。action 发生后,先给中间件处理,最后再dispatch一个action交给reducer去改变状态

Redux原理

export function applyMiddleware(...middlewares) {
  // applyMiddleware 调用时,返回一个函数 A。
  // 这个函数 A 接受一个函数形式的参数 createStore,返回函数 B。
  // 函数 B 可以调用 createStore 函数,生成 store 并且返回。
  return (createStore) => (...args) => {
    const store = createStore(...args);
    let dispatch = store.dispatch;

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args),
    };

    // chain = [logger({getState, dispatch}), thunk({getState, dispatch})]
    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
    // dispatch = thunk({getState, dispatch})(logger({getState, dispatch})])(dispatch)
    dispatch = compose(...chain)(store.dispatch);
    return { ...store, dispatch };
  };
}

function compose(...funcs) {
  if (funcs.length === 0) {
    return (arg) => arg;
  }
  if (funcs.length === 1) {
    return funcs[0];
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)));
}
 

applyMiddleware 是一个层层包裹的匿名函数,也叫函数柯里化,可以层层调用,逐渐求值,有需要的小伙伴可以做进一步了解,这里不做介绍。

5. thunk 中间件实现

  function thunk({ dispatch, getState }) {
    return (dispatch) => (action) => {
      if (typeof action === "function") {
        // 处理异步请求
        return action(diapatch, getState);
      }
      return dispatch(action);
    };
  }
 

可以推断出适用于 thunk 的 action 是什么形式,比如:

asyncAdd = () => {
    store.dispatch((dispatch) => {
      setTimeout(() => {
        store.dispatch({ type: "add" });
      }, 1000);
    });
  };

 

6. 总结

redux 原理好像并不难理解,但是其中的函数处理方式确实短小精悍,着实惊人,希望通过不断的学习,自己也能写出如此优秀的代码。
Redux原理

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容