在 React 的开发中，Redux 和 React-Router 经常被用来管理状态和路由。本文将介绍如何将 Redux 和 React-Router 集成起来使用，以更好地管理应用程序的状态和路由。
安装
首先，我们需要安装 Redux 和 React-Router：
npm install redux react-redux react-router-dom
集成
创建 Redux Store
我们首先需要创建 Redux store，代码如下：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;在这里，我们使用 createStore 函数来创建一个 store，rootReducer 是一个用来处理各种 action 的 reducer。
创建 Redux Provider
Redux Provider 是一个 high order component，它将 store 作为 props 传递给所有子组件。我们将在 index.js 文件中创建它，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这里，我们将 store 引入，然后将其传递给 Provider 组件。App 组件是我们应用程序的主要组件。
创建 Redux reducers
我们需要为各个操作创建 Redux reducers，代码如下：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - --------- ----------- - ---- ------------
----- ------------ - -
------ --
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
--------
------ ------
-
-
----- ----------- - -----------------
------ ------------
---
------ ------- ------------在这里，我们创建了一个 todosReducer，它根据传入的 action 类型来返回新的状态。我们还创建了一个 rootReducer，它将所有 reducers 组合在一起。
创建 Redux actions
我们需要为各个操作创建 Redux actions，代码如下：
-- -------------------- ---- -------
--- ---------- - --
------ ----- -------- - -----------
------ ----- ----------- - --------------
------ -------- ------------- -
------ -
----- ---------
--- -------------
----
--
-
------ -------- -------------- -
------ -
----- ------------
--
--
-在这里，我们为添加和切换状态操作创建了两个 action。
创建 Redux selectors
我们需要为各个操作创建 Redux selectors，代码如下：
-- -------------------- ---- -------
------ ----- --------------- - ------- ------- -- -
------ -------- -
---- -----------
------ ------
---- -----------------
------ -------------- -- -------------
---- --------------
------ -------------- -- --------------
--------
----- --- -------------- ------- -------------
-
--在这里，我们为每个筛选器创建了对应的 selector，这些 selector 接收 todos 和过滤器，返回筛选后的数据。
创建 Redux Container
我们需要创建一个 Container，将 Redux Store 与组件进行连接，代码如下：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ---------------- ---------- - ---- ------------------- ------ -------- ---- ------------------------- ----- --------------- - ------- --------- -- -- ------ ---------------------------- ---------------- --- ----- ------------------ - - ------------ ---------- -- ----- --------------- - ------------------------ ------------------------------ ------ ------- ----------------
在这里，我们将 mapStateToProps 函数传递给 connect，它将从 store 中提取所需的状态并将其传递给目标组件。mapDispatchToProps 将 action creators 映射为 props，并传递给目标组件。
创建路由模板
我们需要为每个路由创建一个模板，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- -------- -- -- -
------ -
-----
-------- ----------
----------
------
--
--
------ ------- ---------在这里，我们创建了一个简单的模板，它将页面标题和其它子组件包裹起来。
创建路由
我们需要为每个路由创建一个 Route，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ -------- ---- -------------
------ --------------- ---- -------------------------------
----- ------ - -- -- -
------ -
-----
------ -------- ------
----------
---------------- ----------------- --
-----------
--------
------ ------------------
----------
---------------- ----------------------- --
-----------
--------
------ ---------------
----------
---------------- -------------------- --
-----------
--------
------
--
--
------ ------- -------在这里，我们创建了三个 Route，它们将不同的 VisibleTodoList 与它们所属的模板结合起来。
创建 App 组件
我们需要创建一个 App 组件，它将包含所有的路由，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------ - ---- -------------------
------ ------ ---- -----------
----- --- - -- -- -
------ -
--------
------- --
---------
--
--
------ ------- ----在这里，我们将 Routes 组件包含在 Router 中。
示例
在这里，我们将创建一个简单的 Todo 应用程序，它用 Redux 和 React-Router 管理状态和路由。
创建 Todo 输入框
我们首先创建一个 Todo 输入框，代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- ------- -- -- -
----- ------------ -------------- - -------------
----- -------- - - -- -
-------------------
--------------------
------------------
--
------ -
----- --------------------
------ ------------------ ----------- -- ------------------------------ --
------- --------------------------
-------
--
--
------ ------- --------在这里，我们创建了一个包含输入框和添加按钮的表单，当用户提交表单时，它将调用 addTodo 函数并清空输入框的值。
创建 Todo 列表
我们还需要创建一个 Todo 列表，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- ----- ---------- ------------- -- -- -
--- ----------------------- -------- --------------- --------- - -------------- - ------ ---
------
-----
--
----- -------- - -- ------ ----------- -- -- -
----
--------------- -- -
----- ------------- --------- ----------------- -- --------------------- --
---
-----
--
------ ------- ---------在这里，我们创建了一个 Todo 组件，它接收一些 props 并在用户点击该 Todo 时更改其状态。我们还创建了一个 TodoList 组件，它将一组 Todos 渲染为无序列表。
创建并导出可添加 Todo 的 VisibleTodoList
我们需要创建一个可以添加 Todo 的 VisibleTodoList，代码如下：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - -------- ----------- --------------- - ---- -------------------
------ - ---------- - ---- -------------------
------ -------- ---- -------------------------
------ ------- ---- ------------------------
----- --------------- - -- -------- ------ ------------ ----- -- -- -
----- ------ - ------------------- -- -----------
------ -
-----
-------- ----------------- --
--------- ----------------------------- -------- ------------------------- --
------
--
--
----- --------------- - ------- --------- -- --
------ -----------
---
----- ------------------ - -
--------
------------ ----------
--
------ ------- ----------------------------------- --------------------------------------在这里，我们创建了一个使用 addTodo 添加 Todo 的 VisibleTodoList。组件将使用 withRouter 来获取 match 对象，并使用它来确定应该显示哪些 Todos。
创建并导出根组件
最后，我们需要创建并导出整个应用程序的根组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------------
------ - ------------- -- ------ - ---- -------------------
------ ------ ---- ----------------------
----- ----- - -------------------------
----- --- - -- -- -
--------- --------------
--------
------- --
---------
-----------
--
------ ------- ----在这里，我们创建了一个 Redux store，并将其作为 props 传递给 Provider 组件。我们还创建了一个包含所有路由的 Router 组件。
总结
在本文中，我们介绍了如何将 Redux 和 React-Router 集成起来使用。我们创建了一个简单的 Todo 应用程序，并分别创建了 input、列表、过滤器和路由等组件。我们还介绍了 Redux store、reducers、actions、selectors、high order components 和 props 映射等概念。希望本文对于了解 Redux 和 React-Router 集成有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6531920c7d4982a6eb35d52c