npm 包 redux-extend-reducer 使用教程

redux-extend-reducer 是一个用于处理 Redux reducer 的 npm 包,它可以帮助我们扩展 reducer 的功能,并且让我们更简单地管理状态。

安装

在使用之前,您需要先安装该包。您可以使用以下命令进行安装:

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

使用

在您的 Redux 项目中,您需要先引入 redux-extend-reducer 并使用 extendReducer 函数对您的 reducer 进行扩展。

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

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

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

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

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

扩展功能

redux-extend-reducer 提供了以下的扩展功能:

请求状态

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

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

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

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

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

对于一个请求,我们通常需要对请求状态进行管理,包括 loading、error 等状态。这里通过传入 request、receive、error 三个参数,即可实现对请求状态的管理。

合并 reducer

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

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

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

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

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

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

我们需要对多个 reducer 进行管理,这时候就需要使用 combineReducer。但是使用 combineReducer 后,我们的 reducer 状态无法直接获取和设置。这里,我们可以使用 redux-extend-reducer 提供的合并 reducer 的方法。示例代码中,我们合并了两个 reducer:counterReducer 和 userReducer。

子状态更新

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

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

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

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

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

在 Redux 中,我们可以通过 reducer 来更新 state,但是如果我们的 state 是一个对象,我们需要对其子属性进行更新,那么原生的 reducer 就无法满足我们的需求。在这种情况下,我们可以使用 redux-extend-reducer 提供的子状态更新功能。

路由状态

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

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

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

redux-extend-reducer 还提供了路由状态的管理,我们只需要传入 route 和路由对象,即可管理我们的路由状态。

结语

redux-extend-reducer 可以帮助我们更加简单地管理 reducer,扩展 reducer 的功能,处理各种复杂状态,同时,它的学习成本也比较低。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005603681e8991b448de65a


猜你喜欢

  • @monaco-ex/pg

    PostgreSQL client - pure javascript & libpq with the same API node-postgres Non-blocking Pos...

    3 年前
  • npm 包 incubus8-fastest-validator 使用教程

    在前端开发中,数据校验是一个非常重要的部分。incubus8-fastest-validator 是一个快速、轻量级、灵活的 JavaScript 数据校验库,用于在应用程序中执行验证操作。

    3 年前
  • lesx-code-inject

    lesx code inject by babel lesx-code-inject lesx code inject by babel. HomePage https://github.com/le...

    3 年前
  • npm 包 angular2-expandable-list 使用教程

    在前端开发中,实现可扩展的列表(expandable list)是一个常见的需求。Angular2-expandable-list 是一个 Angular2 的 npm 包,它提供了一种简单且灵活的方...

    3 年前
  • npm 包 dagre-d3v4 使用教程

    前言 笔者在前端开发中遇到了一些图形可视化的问题,通过查询资料和尝试,最终找到了解决方案:使用 dagre-d3v4 这个 npm 包。本文将通过对该包的介绍和详细使用教程,来帮助读者更好地了解如何使...

    3 年前
  • verification_data

    A library for data validation. verification.js A library for data validation. Install Usage No ES6 -...

    3 年前
  • npm 包 zeronet 使用教程

    什么是 zeronet zeronet 是一个基于比特币区块链技术的完全分散化的网络,通过使用 BitTorrent 协议实现网站的分布和共享,任何人都可以加入并发布站点,站点所有权和内容完全由站点所...

    3 年前
  • dep-cache

    Cache holder in P2P network dep-cache Cache holder in P2P network Usage - --------- ------- --------...

    3 年前
  • ice-video

    React component, a danmuku video player package. ice-video The web danmuku video player built from t...

    3 年前
  • npm 包 rain-rn-android-kit 使用教程

    在前端开发中,我们经常会用到一些第三方工具或者库来简化我们的开发流程。其中,npm 是最常用的包管理工具之一。因此,在本篇文章中,我们将会介绍一款名为 rain-rn-android-kit 的 np...

    3 年前
  • @restorando/winston-tcp-graylog

    graylog support for winston based on gelf-pro winston-tcp-graylog --- - -- ------------------- -----...

    3 年前
  • 在前端中使用 Angular-oauth2-oidc-cognito

    简介 在前端开发中,安全验证是很重要的一环,特别是在与第三方服务进行交互的时候。Angular-oauth2-oidc-cognito是npm包中的一种,它能够帮助前端应用获取访问API所需的Acce...

    3 年前
  • openregister-location-picker

    An autocomplete widget that uses data from the openregister. Location picker - what it is and how to...

    3 年前
  • npm 包 k-bulma 使用教程

    在前端开发中,一个好用的 UI 框架可以提高开发效率,减少不必要的代码精力,其中 Bulma 是一个值得推荐的 CSS 框架。而 k-bulma 是基于 Bulma 的一个 npm 包,提供了更多的特...

    3 年前
  • npm 包 react-glyphs 使用教程

    在前端开发中,我们常常需要使用图标来进行页面设计,而 react-glyphs 是一个非常实用的 npm 包,它可以帮助我们在 React 应用中非常方便地使用字体图标。

    3 年前
  • bootstrap-beta

    The most popular front-end framework for developing responsive, mobile first projects on the web. ...

    3 年前
  • npm 包 choo-umd 使用教程

    npm 包 choo-umd 使用教程 前言 在前端领域,使用 npm 包已经是司空见惯的事情了。其中一个流行的模块化框架是 choo.js,它是基于 Flux 架构设计的一个小巧且易用的框架。

    3 年前
  • ceri-fab

    A flexible fixed-action-button menu. Only usable as a mixin for other ceri components/widgets ceri-f...

    3 年前
  • npm 包 stubby-amp 使用教程

    前言 在前端开发中,我们经常需要与后端进行接口交互。但是由于后端开发速度、接口调试以及前端测试的需要,我们需要使用一些工具来模拟接口请求,而这时 stubby-amp 这个 npm 包就能派上用场了。

    3 年前
  • npm 包 lazylode 使用教程

    在前端开发中,我们经常需要加载一些图片、视频等资源。而这些资源可能会影响网页的速度和性能,因此我们需要一些工具来帮助我们优化它们的加载。其中一个比较常用的工具是 lazylode,它是一个轻量级的延迟...

    3 年前

相关推荐

    暂无文章