前言
在前端开发中，React 和 React-Router 是两个必不可少的技术组件。但是，当我们想在应用中使用 Redux 管理状态时，往往会遇到一个问题：React-Router 和 Redux 之间的集成。为了解决这个问题，社区已经出现了一些方案，其中比较流行的是 react-router-redux。本文将介绍一个名为 react-router-redux-features 的 npm 包，它在 react-router-redux 的基础上提供了更多的功能和便利。
安装
npm install --save react-router-redux-features
使用
Step 1：创建 Redux Store
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - -------------- ---------------- - ---- --------------------- ------ ------------- ---- ------------------------------- ------ - ---------------- ------------------ - ---- ------------------------------ ----- ------- - ---------------- ----- ----------- - ----------------- ------- -------------- --------- ---------------- -- --- -- ------- --- ----- ---------- - ---------------- -------------------------- --------------------- -- --- -- ---------- -- ----- ----- - ------------------------ ------------
在上面的代码中，我们创建了一个 Redux store，并向其中添加了两个新的 reducer：routerReducer 和 featuresReducer，以及一个新的 middleware：featuresMiddleware。
Step 2：使用 features
在组件中配合 featuresMiddleware 使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- - ---- ------------------------------
----- ---- - -- -- -
-----
------ ------
------
--
----- --------------- - -- -- --
-------- -------
---
------ ------- --------------------------------------------在上面的代码中，我们创建了一个组件 Page，并使用了 withFeature 高阶组件返回一个包装后的新组件。在 mapStateToProps 函数中，我们使用了 feature 属性指定了当前组件所属的 feature。这样，在路由变化时，featuresMiddleware 将在 store 中为该 feature 创建一个新的 state 来管理相关数据。
Step 3：dispatch action
react-router-redux-features 提供了两个 action creator：activateFeatures 和 deactivateFeatures，用来激活和撤销 features。它们都接收一个特性数组作为参数。
import { activateFeatures, deactivateFeatures } from 'react-router-redux-features';
store.dispatch(activateFeatures(['page']));
store.dispatch(deactivateFeatures(['page']));在上面的代码中，我们分别使用 activateFeatures 和 deactivateFeatures action creator，对指定的 features 进行激活和撤销操作。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ---------------- --------------- - ---- --------
------ - -------- -------- - ---- --------------
------ - ------ ------- --------- ---------- - ---- -------------------
------ - -------------- ---------------- - ---- ---------------------
------ ------------- ---- -------------------------------
------ - ---------------- ------------------- ------------ ---------------- - ---- ------------------------------
----- ------- - ----------------
----- ----------- - -----------------
------- --------------
--------- ----------------
---
----- ---------- - ----------------
--------------------------
---------------------
--
----- ----- - ------------------------ ------------
----- --- ------- --------------- -
------------------- -
----------------------------------------- -----------
-
---------------------- -
------------------------------------------- -----------
-
-------- -
------ -
-----
------ --------
----
------ ------------------ ----------
------ ------------------ ----------
-----
--------
------ ----- -------- ---------- -- --------- ----------- --- --
------ ------------- --------------------------------- -- ------------- - -------- ------- --- --
------ ------------- --------------------------------- -- ------------- - -------- ------- --- --
---------
------
--
-
-
----- ----- - -- -- -
-----
---- -
------
--
----- ----- - -- -- -
-----
---- -
------
--
----- ------------- - ----------------
----- ---- - -
--------- --------------
-------------- --
-----------
--
--------------------- ---------------------------------在上面的代码中，我们创建了一个包含两个页面的应用，并使用 react-router-redux-features 实现了与 Redux 的集成。在页面切换时，featuresMiddleware 会自动创建或更新 feature 对应的状态。此外，我们还在 App 组件的 componentDidMount 和 componentWillUnmount 函数中使用了 activateFeatures 和 deactivateFeatures action creator，控制 feature 的激活和撤销，以此来控制状态是否保持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9458