Redux 中间件的秘密之旅

2024-01-01 06:00:24

Redux 中间件是一个强大的工具，可以让你扩展 Redux store 的功能。它可以让你在 dispatch 一个 action 之前或之后做一些事情，比如记录日志、发送网络请求或调用其他异步代码。

使用场景

日志记录： 你可以使用中间件来记录 Redux store 中发生的事件。这可以帮助你调试应用程序并了解它是如何工作的。
异步操作： 你可以使用中间件来执行异步操作，比如发送网络请求或调用其他异步代码。这可以让你在 Redux store 中更新数据，而无需手动管理异步操作的状态。
安全性： 你可以使用中间件来实现安全功能，比如验证用户身份或检查用户权限。这可以帮助你保护你的应用程序免受攻击。
性能优化： 你可以使用中间件来优化应用程序的性能。比如，你可以使用中间件来缓存数据或使用更快的算法来计算派生数据。

简单原理实现

一个 Redux 中间件是一个函数，它接受一个 store 和一个 next 函数作为参数，并返回一个新的函数。这个新函数接受一个 action 作为参数，并可以执行一些操作，比如记录日志、发送网络请求或调用其他异步代码。然后，它调用 next 函数，将 action 传递给下一个中间件或 reducer。

手写 applyMiddleware 函数

Redux 提供了一个 applyMiddleware 函数，它可以让你将中间件添加到 Redux store 中。applyMiddleware 函数接受一个或多个中间件作为参数，并返回一个新的 store enhancer。这个 store enhancer 可以被用来创建 Redux store。

const createStore = (reducer, initialState, enhancer) => {
  if (typeof enhancer !== 'undefined') {
    return enhancer(createStore)(reducer, initialState)
  }

  let currentState = initialState
  let currentReducer = reducer
  let isDispatching = false
  const listeners = []

  const getState = () => currentState

  const dispatch = (action) => {
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    listeners.forEach((listener) => listener())

    return action
  }

  const subscribe = (listener) => {
    listeners.push(listener)

    return () => {
      const index = listeners.indexOf(listener)
      listeners.splice(index, 1)
    }
  }

  const replaceReducer = (nextReducer) => {
    currentReducer = nextReducer
    dispatch({ type: '@@redux/INIT' })
  }

  return {
    getState,
    dispatch,
    subscribe,
    replaceReducer,
  }
}

const applyMiddleware = (...middlewares) => (createStore) => (...args) => {
  const store = createStore(...args)
  let dispatch = store.dispatch

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

  middlewares = middlewares.map((middleware) => middleware(middlewareAPI))

  dispatch = compose(...middlewares)(store.dispatch)

  return {
    ...store,
    dispatch,
  }
}