在现代 Web 应用程序中，前端路由管理是非常关键的一部分。而 URL 查询字符串是其中一项重要的标志。如果你正在使用 React 和 Redux 开发应用程序，你可以使用一个叫做 redux-query-string-state 的 npm 包帮助你进行 URL 查询字符串管理。
本篇文章将向你介绍如何使用 redux-query-string-state 包，让你的 React 和 Redux 应用程序可以更好地管理 URL 查询字符串。
安装
首先，你需要安装 redux-query-string-state 包。在你的终端或命令行中，输入以下命令进行安装：
npm install --save redux-query-string-state
使用
redux-query-string-state 包包含两个主要部分：getUrlParamReducer 和 getSyncUrlParamMiddleware。使用这两个工具配合 Redux Store，你可以在前端轻松通过状态管理 URL 查询字符串。
Reducer
首先，让我们来看看如何使用 getUrlParamReducer。它将状态映射到 URL 查询字符串中的参数。使用它之前，你需要定义一个包含 URL 查询字符串参数的初始状态。让我们通过一个示例代码来说明：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------------ - ---- --------------------------- ----- ------------ - - ------ --- --------- --- ----- --- -- ----- --------- - ----------------- --------- --------------------------------- -- --- ---
在上面的代码中，我们定义了一个初始状态，并使用 getUrlParamReducer 根据初始状态生成了一个可传递给 Redux 的 reducer。
Middleware
其次，我们来看看如何使用 getSyncUrlParamMiddleware 同步更改 Redux Store 和 URL 查询字符串：当 Redux Store 改变时，该中间件将从 Store 中获取 URL 查询字符串，并将其更新到浏览器的 URL 查询字符串中。你可以在你的 Redux Store 上调用 applyMiddleware 并传递 getSyncUrlParamMiddleware。
让我们通过示例代码来说明：
import { createStore, applyMiddleware } from 'redux';
import { getSyncUrlParamMiddleware } from 'redux-query-string-state';
import myReducer from './reducers';
const store = createStore(myReducer, applyMiddleware(getSyncUrlParamMiddleware));在上面的代码中，我们将 Redux Store 和一个叫做 getSyncUrlParamMiddleware 的中间件相结合，这将自动使 Redux Store 和 URL 查询字符串同步。
访问与更新 URL 查询字符串参数
现在你的 Redux Store 和 URL 查询字符串已经同步，你可以访问和更新它们中的参数。你可以在你的组件中使用 Redux Store 和 connect 函数对参数进行管理。我们来看一个包含两个组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
------------- - ------- -- -
---------------------
----- ------------------
---- --------
------ -------------------
---
-
-------- -
------ -
------
-----------
------------------------
-----------------------------
--
--
-
-
----- ---------------- - -- ----- -- -- -
---------- ----- --- ----------------
--
----- -------------------- - --------
------- -- -- ------ -------------------- ---
---------------
----- ------------------------- - --------
------- -- -- ------ -------------------- ---
--------------------在上面的代码中，我们通过 React 和 Redux 进行了参数的管理。在 MyComponent 组件中，我们定义了一个 onInputChange 方法，该方法将新的查询参数分发到 Redux Store 中。在 MyOtherComponent 组件中，我们从 Redux Store 中取出查询参数于我们的组件页面一起渲染。然后，我们通过 connect 函数将这两个组件连接到 Redux Store 上。
此时，如果你在 input 中输入一些文本，你会发现 URL 查询字符串中的 query 参数已更新。
结论
使用 redux-query-string-state 包，你可以轻松地将 URL 查询字符串管理集成到你的 React + Redux 应用程序中。我希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e34f8