在前端开发中，我们通常会使用 Redux 来管理应用状态，但是在实际开发中，我们经常需要处理路由，这就需要使用到 Redux 与路由的整合库。
redux-first-router 是一个旨在为 Redux 应用提供轻松可维护路由的库，而 @types/redux-first-router 则是相应的 TypeScript 类型库。在这篇文章中，我们将学习如何使用 @types/redux-first-router 来管理我们的应用路由和状态。
安装
您可以使用 npm 命令来安装 @types/redux-first-router：
npm install @types/redux-first-router --save-dev
应用场景
在介绍具体使用方法之前，我们先来看一下 redux-first-router 的应用场景。
Vue.js 和 React 这样的框架已经实现了生命周期函数。但是，由于路由并没有被完全地整合到这些框架中，开发人员仍然需要自己来处理路由事件。这也意味着，我们必须在某些生命周期钩子函数中调用 React Router 或 Vue Router 的方法。
使用 redux-first-router 的好处之一就是可以将应用的路由与状态管理在一个地方进行处理。这使代码更加易于维护，同时还可以消除应用中与路由相关的问题。我们可以将路由作为一个 Redux reducer 处理。
使用
接下来，我们将按照以下步骤来学习如何使用 @types/redux-first-router。
1. 创建 store
首先，我们需要创建 Redux Store。如果您已经熟悉 Redux 的操作，则可能已经知道如何创建了。
-- -------------------- ---- ------- ------ - ------------ ---------------- ---------------- ------- - ---- -------- ------ - -------------- ---------------- - ---- --------------------- ----- --------- - - ----- ---- ------ --------- -- ----- - -------- ----------- -------- - - --------------------------- - -- ---------- --- ----- ------------------------- - ----------------------------------------- ----- ----- - -------------------------- ----------------- --------- -------------- -- ---- -------- -- --- -------- -- ------ ------- ------
上面的代码示例创建了一个全局的 Redux Store。所有添加到中间件中的 action 都会根据路由规则被路由处理。路由的 reducer 名称为 location。如果您希望对 Store 中的 reducer 进行其他操作，请合并其他 reducers。
2. 添加路由
添加路由代码可以将路由机制定义为一个独立的库，然后将其添加到路由中间件中。我们可以在 routesMap 对象中定义路由名称和路由匹配规则。 redux-first-router 将使用这个 routesMap 对象来处理路由。
在你的应用中添加以下代码：
import { routesMap } from 'your-routes-map';
const result = matchRoutes(Object.values(routesMap), pathname);
if (result.length > 0) {
const { route, match } = result[0];
const finalRoute = routesMap[route];
store.dispatch({ type: route, payload: { ...action.payload, match, finalRoute } });
}这个代码片段将路由处理逻辑整合到 Redux Store 中。如果您的应用程序需要使用 React Router 或 Vue Router，那么您可以在 onEnter 或 beforeEach 钩子函数中调用这段代码。
3. 处理路由事件
当路由变化时，我们需要将其与 Store 中的状态进行协调。这样，我们才能在路由发生变化时正确地操作应用程序的状态。
因此，我们可以将路由作为 Redux Action 处理。每个路由都应该被定义为一个唯一的 Action 类型。
-- -------------------- ---- -------
------ - --------------------- - ---- --------------------------------
----- ------- --------------------------- - -
----- ---------------
-------- -
----- --------- -- -- ----
------ - ------ ------- -- -- ----- --
--
--
-----------------------这个代码片段使用 redux-first-router 中的 ReduxFirstRouterTypes 接口来指定 type 属性。
4. 关联路由与组件
最后，我们希望当用户访问特定的路由时，将特定的组件与之相关联。
例如，当用户访问 /about 路由时，我们应该渲染 About 组件。我们可以使用 mapStateToProps 或 Reselector 去关联组件和状态，以便渲染特定的路由。
-- -------------------- ---- -------
----- --------------- - ------- -- --
------------- --------------------
---
----- ----- - ------- -- -
------ -
-----
-----------------------------
------- -- --- ----- --------
------
--
--
------ ------- --------------------------------上面的代码片段使用 connect 方法将 currentRoute 属性与 Store 中的 location.type 进行映射。
这是一个简单的案例，您可以根据需要定制您的匹配逻辑，并为您的路由注册相应的处理程序。
总结
本文介绍了如何使用 @types/redux-first-router 库来整合应用中的 Redux 状态和路由。您学习了如何创建 Store、添加路由、处理路由事件和关联路由与组件。
在实际开发中， @types/redux-first-router 可以更好的处理复杂的应用程序路由和状态管理，从而使代码更具可维护性。相信在今后的开发中，您会更加熟悉和熟练地使用这个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1aab5cbfe1ea0611e97