Redux 中间件的力量：记录日志和识别 Promise

在 Redux 中，中间件是一个允许我们在 dispatch action 之前或之后做一些事情的函数。这使得我们可以实现一些有用的功能，比如记录日志、记录 action 历史、实现撤销操作等等。

中间件可以说是 Redux 最出色的设计之一了，通过他，我们可以实现很多有用的功能，比如记录日志、记录 action 历史、实现撤销操作等等。废话不多说，直接操作，在上一节代码的基础上，实现记录日志和识别 Promise 的中间件，先抛开 Redux 实现几个简单版本的中间件。

记录日志

首先，我们实现一个简单的记录日志的中间件。这个中间件将在每个 action 被 dispatch 之前记录一条日志。

const loggerMiddleware = store => next => action => {
  console.log('dispatching action', action)
  return next(action)
}

要使用这个中间件，我们需要在创建 Redux store 时将其传入。

const store = createStore(reducer, applyMiddleware(loggerMiddleware))

现在，每次我们 dispatch 一个 action，控制台都会输出一条日志。

识别 Promise

接下来，我们实现一个识别 Promise 的中间件。这个中间件将在每个 action 被 dispatch 之前检查它是否是 Promise。如果是的话，它将在 Promise 解析后 dispatch 相应的 action。

const promiseMiddleware = store => next => action => {
  if (isPromise(action)) {
    return action.then(
      result => store.dispatch({ type: 'PROMISE_FULFILLED', payload: result }),
      error => store.dispatch({ type: 'PROMISE_REJECTED', payload: error })
    )
  }

  return next(action)
}

要使用这个中间件，我们需要在创建 Redux store 时将其传入。

const store = createStore(reducer, applyMiddleware(promiseMiddleware))

现在，我们可以 dispatch Promise 了。

store.dispatch(fetchTodos())

中间件将等待 Promise 解析，然后 dispatch 相应的 action。

更复杂的中间件

上面的中间件只是简单的示例。我们可以实现更复杂的中间件来实现更高级的功能。例如，我们可以实现一个中间件来记录 action 的历史，或者实现一个中间件来实现撤销操作。

Redux 中间件库

有很多 Redux 中间件库可供我们使用。这些库提供了许多开箱即用的中间件，我们可以直接使用它们。例如，我们可以使用 redux-thunk 库来实现异步 action，或者使用 redux-saga 库来实现更复杂的异步逻辑。

结论

Redux 中间件是一个强大且灵活的工具。它允许我们扩展 Redux 的功能并实现许多有用的功能。我们可以使用中间件来记录日志、识别 Promise、记录 action 历史、实现撤销操作等等。有很多 Redux 中间件库可供我们使用，我们可以直接使用它们来实现所需的功能。