前言
在今天的 Web 应用开发中，React 已经成为了非常流行的前端框架之一，并且其生态圈中还有一系列重要的库来补充它的不足。Redux 和 React-Router 就是其中两个非常重要的库，分别用来管理应用的状态和路由。在本文中，我们将会学习如何在 React 应用中集成 Redux 和 React-Router 并解决一些常见的问题。
Redux
Redux 简介
Redux 是 JavaScript 应用中最常用的状态管理库。它的主要原则是将应用的状态存储在一个单一的 “Store” 中，并且整个应用的状态是只读的。通过 dispatching actions 对 state 进行修改，并且每次修改都会触发一个新的 state 的创建，从而使得状态的变化更加明确和追踪。
Redux 的工作流程
Redux 的工作流程如下：
- 用户触发一个 action；
- Store 接收到这个 action 并触发 reducer；
- Reducer 根据 action 和当前的 state 返回一个新的 state；
- 通过 Provider 将 store 传递给应用的其他组件；
- 应用中的组件从 store 中获取数据并且更新自身的状态。
Redux 的使用
在 React 应用中使用 Redux，我们需要做以下几个步骤：
- 安装 Redux 并引入
createStore方法； - 创建一个 reducer 方法；
- 使用
createStore方法和 reducer 方法创建一个 store； - 使用
Provider将 store 注入到应用的根组件中。
下面是一个简单的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- -- -- ---- ------- -- -------- ------------- - -- ------- - ------ ------------- - ---- ------------ ------ ----- - -- ---- ------------ ------ ----- - -- -------- ------ ------ - - -- -- -- ----------- --- ------- ------ ----- ----- ----- - --------------------- -- -- -- -------- - ----- ---------- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --展开代码
Redux 集成 React-Router
在使用 React-Router 来管理路由时，每个路由都应该对应着一个组件。我们可以将 Redux 中的 state 直接传递给应用的每个组件，让每个组件自行处理它要展示的内容。
在这种方法中，我们会将路由信息作为 state 的一部分，并且在应用中的每个组件中映射路由参数。
下面是一个简单的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- ------------------- ------ - ------- - ---- -------------- ----- --------------- - ------- -- - ------ - ------ ----------- -- -- ----- ------- - -- ----- -- -- - ------ - ----- ----------- ------------- ----- -------------------------------- ----- -------------------------------- ------ -- -- ------ ------- ------------------------ ---------------展开代码
在上面的代码中，我们使用 connect 方法将 Redux 中的 state 映射到组件的 props 中。这样我们就可以在组件中直接使用 this.props.count 来获取应用的状态了。
同时，我们使用了 <Link> 组件来定义应用中的路由。这个组件将会渲染成一个超链接，点击这个链接将会触发 React-Router 中的路由。
React-Router
React-Router 简介
React-Router 是 React 应用中最重要的路由处理库。它使用了浏览器栏中的 URL 来匹配路由，然后将对应的组件渲染到页面中。React-Router 还提供了一些其他的功能，如路由守卫、动态路由等。
React-Router 的使用
在 React-Router 应用中，我们通常会定义一些路由，每个路由都会对应着一个组件。下面是一个示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------- -- ------- ----- - ---- ------------------- ------ ---- ---- --------- ------ ----- ---- ---------- ----- --- - -- -- - ------ - -------- ----- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ --------- -- -- ------ ------- ----展开代码
在上面代码中，我们使用了 <Router> 组件来定义我们的路由，然后使用 <Route> 组件来定义每个路由。exact 属性用来匹配精确路径。
React-Router 集成 Redux
在 React-Router 应用中集成 Redux 的步骤非常简单：
- 在每个需要使用 Redux state 的组件中，使用
connect方法来将 Redux 的 state 使用 props 传递给组件。 - 在需要使用路由的组件中，使用
withRouter方法将路由使用 props 传递给组件。
下面是一个示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- ---------- - ---- ------------------- ------ - ------- - ---- -------------- ----- --------------- - ------- -- - ------ - ------ ----------- -- -- ----- ------- - -- ------ ------- -- -- - ------ - ----- ----------- ------------- ----- -------------------------------- ----- -------------------------------- ------- ----------- -- -------------------- ------------- ------ -- -- ------ ------- ----------------------------------- ----------------展开代码
在上面代码中，我们使用了 withRouter 方法将路由作为 props 传递给组件。这样我们就可以在组件中使用 this.props.history 来控制路由了。
常见问题解决
如何处理异步操作？
在 Redux 应用中，处理异步操作可能会比较麻烦。通常我们会使用 Redux 提供的 middleware 或者使用 Axios 等库来处理异步操作。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- --------- - -- -- - ------ ---------- -- - ---------- ----- ----------------- --- ------ -------------------------------------- -- - ---------- ----- --------------------- -------- - ----- ------------- - --- -------------- -- - ---------- ----- ------------------- -------- - ------ --- - --- --- -- --展开代码
在上面的代码中，我们使用了 Redux 提供的 thunk middleware 来处理异步操作。在这段代码中，我们 dispatch 了一个 LOADING_STARTED action，然后使用 Axios 库发送一个 GET 请求。请求成功后我们将数据以 FETCH_DATA_SUCCESS action 的形式 dispatch 到 store 中。如果请求失败，我们将错误信息 dispatch 到 store 中。
如何处理表单？
在 React 应用中处理表单常常会遇到一些麻烦。通常我们会使用 Redux 来管理表单状态。
下面是一个示例代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- -------------- ----- ------------------ - ---------- -- - ------ - ------------- ------ -- - ---------- ----- -------------- -------- ---- --- - -- -- ----- ---- - -- ------------ -- -- - ----- ---------- ------------ - ------------- ----- ------------- - ----- -- - --------------------- -------------- -------- --- ---------------- -- ------ - ----- ------------------------- ------- -------- ------ ----------- ---------------- --------------- -- ------------------------------ -- -------- ------- ----------------------------- ------- -- -- ------ ------- ------------- --------------------------展开代码
在上面的代码中，我们使用了 React 的 Hooks API 来处理表单的状态，然后在提交表单的时候将数据以 FORM_SUBMIT 的形式 dispatch 到 store 中。
结语
Redux 和 React-Router 是 React 生态圈中两个非常重要的库，对于 React 应用的开发非常有帮助。在本文中，我们学习了如何将这两个库集成在一起，并且解决了一些常见的问题。希望这篇文章能帮助你更好地使用这两个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c28694314edc2684bdb558
