npm 包 redux-lager 使用教程-JavaScript中文网-JavaScript教程资源分享门户

#npm 包 redux-lager 使用教程

##介绍该文章将介绍如何使用 redux-lager 这个 npm 包。redux-lager 是一个可以用来帮助处理 Redux 中间件的库。它提供了许多有用的工具，其中包括 logger，中间件等等。在使用redux-lager 之前，需要先安装 redux。

##安装使用 npm 命令进行安装：

npm install redux-lager --save

安装完成后，将 redux-lager 导入到您的项目中：

import { createStore, applyMiddleware } from 'redux';
import createLogger from 'redux-lager';

const store = createStore(
  reducer,
  applyMiddleware(createLogger())
);

现在您可以使用 redux-lager 了！让我们看一下如何使用它来加强 Redux 的功能。

##使用

在上面的示例中，我们已经提到如何使用 redux-lager。applyMiddleware(createLogger()) 执行了 createLogger() 函数并将其用作 middleware。这样，我们就可以使用 redux-lager 了。

##Middleware Middleware 是 Redux 中的一个很重要的概念。他们可以拦截所有的 action，并在它们到达 reducer 之前处理它们。它们可以用来处理异步的 API 调用、路由切换，以及很多其他事情。

让我们来看一下如何使用 redux-lager 来创建一个 middleware：

import createLogger from 'redux-lager';

const middleware = createLogger();

我们现在已经创建了一个名为 middleware 的 log 中间件。我们可以把它放进 Redux 的 applyMiddleware 函数中使用：

const store = createStore(
  reducer,
  applyMiddleware(middleware)
);

现在，每次有数据在 Redux 上进行更改时，我们的 middleware 就会记录日志。

##Logger 在上面的例子中，我们使用了 CreateLogger() 函数，这就是我们的 logger。这个 logger 能够记录 Redux 中的所有数据更改。它记录每个 action 的名称、开始时间、结束时间、所需的时间以及任何数据改变，比如变化的状态。

让我们看一下如何使用 redux-lager 的 logger：

import createLogger from 'redux-lager';

const logger = createLogger();

store.subscribe(() => {
  console.log(logger.getState());
});

现在，当 Redux 中的数据发生改变时，logger 会将这些更改记录下来。您可以调用 logger.getState() 来获取当前状态，并使用该状态来更好地理解您的应用程序中正在发生的事情。

##示例代码下面是一个示例代码，它展示了如何在 Redux 中使用 redux-lager：

-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------ ---- --------------

----- -------- - -----------

----- ------- - ------ -- --
  ----- ---------
  -----
---

----- ------------ - -
  ------ ---
--

----- ------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ---------
      ------ - --------- ------ ---------------- ------------ --
    --------
      ------ ------
  -
--

----- ------ - ---------------

----- ----- - ------------
  --------
  -----------------------
--

------------------ -- -
  -------------------------------
---

----------------------------- ---------

--- ---

-
  -------- --- --- -- ---- -------- -------- ------
  --------- --- --- -- ---- -------- -------- ------
  --------- ------
  ----- -----------
  -------- -
    ----- ------ ------
  -
-

--

##结论您现在应该知道如何使用 redux-lager 了。记住，redux-lager 能够帮助您更好地了解您的应用程序中正在发生的事情，以及您可以从中得到什么。使用它对于调试 Redux 应用程序非常有用。拥有这个工具，您现在应该能够更轻松地检查状态，并更好地理解它们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a3d