手写一个redux、applyMiddleware、thunk

最新推荐文章于 2024-02-24 16:38:39 发布

猛踹瘸子那条好腿の

最新推荐文章于 2024-02-24 16:38:39 发布

阅读量163

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_54607676/article/details/127108690

版权

本文介绍了如何使用Redux实现store，重点讲解了compose函数、applyMiddleWares中间件函数的创建，以及thunk和consoleFun中间件的实际应用。通过实例演示了中间件执行顺序和如何配合reducer进行状态管理。

摘要由CSDN通过智能技术生成

redux实现

const compose = (...funs) => {
  return funs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  );
};

//实现中间件函数，函数聚合成高阶函数
const applyMiddleWares = (...funs) => {
  if (funs.length === 0) return false;
  if (Object.prototype.toString.call(funs[0]) !== "[object Function]") {
    return false;
  }

  const enhanceFuntion = compose(...funs);
  return enhanceFuntion;
};

//实现redux中的createStore
const createStore = (reducer, middleWare) => {
  let currentState;

  const dispatch = (action) => {
    currentState = reducer(currentState, action);
  };

  const getState = () => {
    return currentState;
  };

  //执行dispatch，获取初始的state值
  dispatch({ type: "INITIAL" });

  let enhanceDispatch = dispatch;

  //判断是否有middleware
  if (middleWare instanceof Function) {
    enhanceDispatch = middleWare(dispatch);
  }
  return {
    dispatch: enhanceDispatch,
    getState: getState,
  };
};

thunk

const thunk = (dispatch) => {
  return (action) => {
    if (action instanceof Function) {
      action(dispatch)
      return
    }
    dispatch(action)
  }
}

consoleFun

const consoleFun = (dispatch) => {
  return (action) => {
    const { payload } = action;
    console.log('我截获到了', payload)
    dispatch(action)
  }
}

例：

//声明一个reducer    
    const reducer = (state = 1, { type = null, payload = 1 }) => {
      switch (type) {
        case "IN": return state += payload;
          break;
        case "DE": return state -= payload;
          break;
        default: return state
      }
    }

//创建store
const store = createStore(reducer, applyMiddleWares(thunk, consoleFun))