Redux-logger 的使用及其代码实现细节
在前端开发中，Redux 是一种常用的状态管理工具，它可以让我们更加方便地管理应用程序中的状态，并且可以在多个组件之间共享状态。然而，在使用 Redux 进行开发时，我们常常会遇到一些问题，例如难以调试，无法查看状态变化等问题。为了解决这些问题，我们可以使用一个辅助工具：Redux-logger。
Redux-logger 是一个中间件，它可以帮助我们记录 Redux 的状态变化。当我们执行 dispatch 操作时，它会在控制台输出当前的状态变化，包括前后状态以及对应的 action。这样可以让我们更加方便地了解应用程序中的状态变化，并进行调试。
下面，我们将会介绍如何使用 Redux-logger，并且讲解一些它的代码实现细节。
使用 Redux-logger
在使用 Redux-logger 之前，我们需要先安装它：
npm install redux-logger --save-dev
然后，在创建 store 时，使用 applyMiddleware 函数将 Redux-logger 作为中间件传入：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger'
import reducer from './reducers';
const store = createStore(
reducer,
applyMiddleware(logger)
);上述代码中，我们先引入了 redux-logger 模块，然后使用 applyMiddleware 函数将其作为中间件传入 createStore 函数中。
在应用程序中执行 dispatch 操作时，Redux-logger 会在控制台输出当前状态的变化。一个示例如下图所示：
Redux-logger 的代码实现细节
Redux-logger 作为一个中间件，需要在 store 中进行处理。下面是它的代码实现细节：
function logger({ getState }) {
return next => action => {
console.log('dispatching', action)
const result = next(action)
console.log('next state', getState())
return result
}
}Redux-logger 函数接受一个参数，这个参数包含了 getState 函数。getState 函数可以获取当前 store 中的状态。
在返回一个函数的过程中，我们使用了函数柯里化。函数的调用链拆分成了两个箭头函数的形式。这种方式可以让我们更加方便地扩展中间件。通过将中间件函数串联起来，我们可以构建一个中间件链。例如，我们可以串联多个中间件来实现不同的功能。
在返回的函数中，我们打印了当前执行的 action，并在执行完 action 后打印了新的状态。这样可以方便我们查看状态变化。
总结
Redux-logger 是一个非常有用的工具，它可以方便我们在开发过程中调试应用程序。在使用 Redux-logger 时，我们只需要将其作为中间件传入 createStore 函数中即可。同时，我们还可以通过末尾中间件的形式来扩展其它的中间件。上述代码实现中，我们使用了函数柯里化和高阶函数来实现了 Redux-logger 的代码。希望这篇文章可以帮助更多人理解 Redux-logger 的使用和代码实现细节。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e701b7d4982a6ebf77777