在现代Web开发中，单页应用（SPA）已成为主流。SPA不仅能提供更好的用户体验，还能加快网站的加载速度和减轻服务端的负担。然而，要实现一个真正的SPA并非易事。本文将介绍如何利用Redux和React Router来构建一个真正的SPA，并提供具体的代码示例。
Redux
Redux是一个状态管理库，通过将状态(action)和行为(reducer)分离，简化了应用程序的复杂度。Redux的五个核心概念是：
- store：包含了应用的状态树
- action：是一个描述应用中发生事件的普通对象
- reducer：用来更新store中的状态
- dispatch：将action发送到reducer中
- subscribe：监听state的变化
现在，我们将学习如何使用Redux来管理应用程序的状态。
安装Redux
首先，需要安装Redux。在终端执行以下命令：
npm install --save redux
创建store
创建一个store很简单，只需要在应用程序中导入createStore函数，然后传递一个reducer给它就行了。一个简单的小例子：
-- -------------------- ---- -------
------ ------------- ---- --------
----- ------------ - ------- ---
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- ------
------ ------- ----------- - ----------------
--------
------ ------
-
-
----- ----- - ---------------------在这个例子中，我们创建了一个初始状态为“count: 0”的store，并传入了一个简单的reducer。这个reducer可以接受一个名为“ADD”的action，并将其值加到当前的count中。
dispatch一个action
要将一个action发送到store中，只需要调用store的dispatch函数，并传递一个包含type和payload的对象。例如，我们可以在点击一个按钮时触发该action：
document.getElementById('button').addEventListener('click', ()=> {
store.dispatch({type: 'ADD', payload: 1})
});订阅state的变化
想要获得更新后的state，我们可以通过store的subscribe函数来订阅state的变化，然后在回调函数中更新UI。例如：
const render = () => {
document.getElementById('count').innerHTML = store.getState().count;
}
store.subscribe(render);
render();React Router
React Router是一个用于React的路由库，可以帮助我们构建单页应用。React Router通过使用组件即将不同的URL映射到不同的组件，让应用程序之间的切换变得容易。下面，我们将介绍如何使用React Router实现SPA。
安装React Router
我们需要安装React Router。在终端运行以下命令：
npm install --save react-router-dom
Router
在现代SPA应用程序中，Router是必不可少的。React Router有多种类型的Router，但我们将使用Browser Router来实现。
import {BrowserRouter as Router} from 'react-router-dom';
<Router>
<App />
</Router>Route
使用Route组件可以将URL子路径（和正则表达式）与组件一一匹配。例如，我们想要将URL的路径“/about”与About组件相匹配：
import {Route} from 'react-router-dom';
<Route path="/about" component={About} />Switch
Switch组件只会渲染匹配的第一个路由，所以我们不需要再次搜索所有路由。例如：
-- -------------------- ---- ------- ------ -------- ------ ---- ------------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ --------------- ------------------- -- ------ ------------- ----------------- -- ------ -------------------- -- ---------
Linking
使用Link组件，在React Router中更容易地进行页面导航。例如：
import {Link} from 'react-router-dom';
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>使用React Router实现SPA
现在，我们已经学会了Redux和React Router的基本知识，可以使用它们来构建一个真正的SPA了。下面是简单的代码示例：
-- -------------------- ---- -------
------ ------------- ---- --------
------ -------------- -- ------- ------- ------ ----- ---- -------------------
------ ----- ---- --------
------ -------- ---- ------------
----- ------------ - ------- ---
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- ------
------ ------- ----------- - ----------------
--------
------ ------
-
-
----- ----- - ---------------------
----- ---- - -- -- -
------ -
-----
-------------
--------- ----------------------------
------- ----------- -- --------------------- ------ -------- -----------------
--- --
----- ------------------------
--- --
----- ----------------------------
------
--
-
----- ----- - -- -- -
------ -
-----
--------------
------- -- --- ----- ---------
--- --
----- ------------------
--- --
----- ----------------------------
------
--
-
----- ------- - -- -- -
------ -
-----
----------------
------- -- --- ------- ---------
--- --
----- ------------------
--- --
----- ------------------------
------
--
-
----- -------- - -- -- -
------ -
-----
------- --- ----------
----- ------------------
------
--
-
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ----- ---------- ---- --
-
------------------------ ---------- -
---------------
------ ------
---------- ---------
--
-
-------- -
-- ---------------------- -
------ -
-----
------------- ---- -----------
-------- -------- ----------- ---------- ---
----------------- -- ----------------------------
--- --
-------------------------------------
----------
--- --
----- ------------------
--- --
----- ------------------------
------
--
-
------ --------------------
-
-
----------------
---------------
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ------------- ----------------- --
------ -------------------- --
---------
---------
-----------------
-------------------------------
--在这个代码示例中，我们创建了一个带有一个Redux store的React应用程序，并使用React Router来管理路由。 我们还使用了Link、Switch和Route等React Router组件来实现了SPA。
结论
我们已经介绍了如何使用Redux和React Router来构建一个真正的SPA，并提供了相应的代码示例。希望这篇文章对正在构建SPA的前端开发人员有所帮助。除此之外，Redux和React Router还有很多深入的话题，例如middleware和嵌套路由等。如果您对这些话题感兴趣，可以深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719f86c9babaf620f9fe856