redux-cube-with-router-legacy 是一个基于 Redux 构建的可嵌入的应用状态管理方案，它内置了 React Router 5 以帮助你更好的管理应用中的页面路由，并且支持 Redux DevTools，方便开发和调试。本文将介绍如何使用这个 npm 包。
安装
使用 npm 安装：
--- ------- ----------------------------- ------
用法
首先，请确保你已经对 React 和 Redux 有一定的了解和熟悉。
快速开始
首先，你需要创建你的 Redux Store，以下是一个简单的例子：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------------------- -- ------------------------------------- -- - ----- -------- -- -- ------ ------- ------
然后，你需要使用 withRouter 和 Provider，将你的应用包装起来：
------ ----- ---- --------
------ -------- ---- ------------
------ - ---------- - ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----- ------------- - ---------------- -- -- ---------- ------
----------------
--------- --------------
-------------- --
------------
-------------------------------
--接下来，你需要创建你的应用根组件 App，并使用 withRouter 包装它，这样才能支持 React Router 5。
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ - ------- - ---- --------------
------ ---- ---- ---------
------ ----- ---- ----------
------ - ---------- --------- - ---- ------------
----- --- - -- ------ ---------- ---------- ------- -- -- -
----- -------------- - -- -- -
------------
-----------------------
--
----- -------------- - -- -- -
------------
-----------------------
--
------ -
--
--------- -----------
------- ------------------------------------------
------- ------------------------------------------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
---------
---
--
--
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -------- -- --
---------- -- -- ----------------------
---------- -- -- ----------------------
---
------ ------- --------
----------------
------------------
-------------------在以上代码中，我们定义了两个按钮和 count 属性，当用户点击按钮时，会分别调用 increment 或 decrement 的方法来修改值，并且跳转到 About 页面。
高阶组件
redux-cube-with-router-legacy 库提供了多个高阶组件，你可以使用它们来方便的管理你的应用状态：
withStore
withStore 是一个高阶组件，它用于给组件注入一些 store 相关的属性。
------ - --------- - ---- -------------------------------- ----- ----------- - -- ----- -- -- - ----- - ----- - - ----------------- ------ --------- ------------ -- ------ ------- -----------------------
在以上代码中，我们使用了 withStore 来注入 store 属性，store.getState() 方法可以获取到当前的状态值。
withRouter
withRouter 是一个高阶组件，它用于给组件注入一些 router 相关的属性。
------ - ---------- - ---- --------------------------------
----- ----------- - -- ------- -- -- -
----- ----------- - -- -- -
------------------
--
------ ------- -------------------------- --------------
--
------ ------- ------------------------在以上代码中，我们使用了 withRouter 来注入 history 属性，可以使用 history.push() 方法来跳转到其他页面。
Action
在 Redux 中，一个 Action 通常是一个简单的纯对象，用于描述发生了什么行为，例如增加数值、减少数值等，以下是一个 Action 的示例：
------ ----- --------- - -- -- -- ----- ----------- ---
在以上代码中，我们定义了一个叫做 increment 的 Action，它的 type 属性为 'INCREMENT'。
Reducer
在 Redux 中，一个 Reducer 是一个纯函数，它用于根据当前状态和 Action 来生成新的状态，以下是一个 Reducer 的例子：
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-在以上代码中，我们定义了一个 Reducer，它有一个初始状态 initialState，当接收到 INCREMENT Action 时，会增加 count 的值，并返回一个新的状态，当接收到 DECREMENT Action 时，则会减少 count 的值。
Store
在 Redux 中，一个 Store 用于管理整个应用的状态，并提供对状态的修改接口，以下是一个 Store 的简单例子：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- -- ---- ----- ------ ------- ------
在以上代码中，我们创建了一个 Store，并传入了一个 Reducer，这个 Reducer 就是我们在前面定义的 reducer 函数。
总结
redux-cube-with-router-legacy 是一个帮助开发者更好地管理状态和路由的库，本文介绍了它的安装、使用方法和一些常用的概念和接口。通过学习本文章，你可以更好地理解 Redux 和 React Router 5，并能在你的应用中使用 redux-cube-with-router-legacy 来更简单地管理状态和路由的变化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067007e361a36e0bce8add