React 和 Redux 是前端开发最热门的两个技术，它们在 SPA（Single Page Application）中的应用变得越来越普遍。本文将详细介绍 React 和 Redux 两个库的基本概念和使用，并通过一个示例代码的 SPA 项目实践，给读者带来更深入的学习和指导意义。
什么是 React
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 推出。它通过将应用程序分解为可重用的组件，简化了复杂用户界面的开发，提高了开发效率。React 还可以与其它库或框架结合使用，例如 React Native 可以跨平台构建原生应用程序。
React 的基本元素是组件，可以将应用程序看作是一组嵌套的组件。组件可以是标准的 HTML 元素，也可以是开发者定义的自定义元素，组件可以被嵌套在其它组件中。
React 的组件具有以下特点：
- 强制使用单向数据流，父组件传递给子组件的数据只能通过 props 传递，子组件无法直接修改父组件的数据，子组件可以通过调用父组件传递的回调函数，通知父组件做出相应的修改。
- 组件之间是相互独立的，一个组件可以重复使用多次，并在不同的场合被使用。
- 组件可以带有内部状态（state），状态变化通常是由用户事件引起的，例如用户的点击或者输入。
什么是 Redux
Redux 是一个用于管理应用程序状态的 JavaScript 库，它可以让你将应用程序状态统一存储在一个地方，使应用程序更加易于维护。Redux 专注于应用程序状态的管理，可以与任何框架或库一起使用，包括 React。
Redux 的设计思想包含以下三个部分：
- 应用程序状态存储在一个单一的 "Store" 中。这个 "Store" 中保存了整个应用程序的所有状态。
- "Action" 是指应用程序中发生的事件，它们是描述事件发生时你想要做什么的简单的 JavaScript 对象。例如，在一个计数器应用程序中，你可以编写一个 "increment" 操作（Action），它将使计数器值加一。
- "Reducer" 是指在应用程序状态发生更新时如何更新状态的纯函数。这些函数接收来自 "Action" 的信息并返回一个新的状态。在某种意义上，"Reducer" 就是将旧的状态和 Action 合并为新的状态的函数。
React 和 Redux 的实践
下面我们通过一个 React 和 Redux 结合的小项目来看看如何使用这两个库构建 SPA。这个项目是一个简单的备忘录应用程序，我们可以添加新的备忘录，编辑现有的备忘录，还可以将它们标记为已完成。
整个项目的文件结构如下：
-- -------------------- ---- -------
----
-----------
---------
--------
-----------
------------
--------
---------------
---------
---------------
---------
-------
---------组件
我们需要定义四个组件：
Memos组件，用于显示已有的备忘录信息和编辑视图。Memo组件，用于显示单个备忘录信息和切换完成状态。AddForm组件，用于添加新备忘录。EditForm组件，用于编辑备忘录。
下面是 Memos 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ---- ---- ---------
------ -------- ---- -------------
----- ----- ------- --------------- -
-------- -
----- - ------ -------------- --------- --------- ---------- - - -----------
----- -------- - ---------------- -- -
-- -------- --- -------------- -
------ --------- ------------- ------------ ------------------ ---------------- ------------------- ---
- ---- -
------ ----- ------------- ----------- ------------------- ----------------------- ---
-
---
------ -
---- ------------------
----------
------
--
-
-
----- --------------- - ------- -- -
------ -
------ ------------
-------------- -------------------
--
--
----- ------------------ - ---------- -- -
------ -
--------- ---- -- -
---------- ----- ------------ -- ---
--
--------- ---- ------ ----- -- -
---------- ----- ------------ --- ------ ---- ---
--
----------- ---- -- -
---------- ----- -------------- -- ---
-
--
--
------ ------- ------------------------ ---------------------------Memo 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- ------- --------------- -
-------- -
----- - ----- --------- ---------- - - -----------
------ -
---- -----------------
--- ------------------------- - ----------- - ---------------------
------------------
------- ----------- -- --------------------------------
------- ----------- -- ------------------------------------
------ --------------- ------------------------ ------------ -- ------------------------- --
------
--
-
-
------ ------- -----AddForm 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
----- --
--
-
-------- -
----- - ------- - - -----------
----- - ------ ---- - - -----------
------ -
-----
--------------------
------------- -- -
-------------------
-------------- ------
--------------- ------ --- ----- -- ---
--
-
------
-----------
-------------------
-------------
------------- -- --------------- ------ -------------- ---
--
---------
------------------
------------
------------- -- --------------- ----- -------------- ---
--
------- ----------------- -------------
-------
--
-
-
------ ------- --------EditForm 组件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -----------------
----- ---------------
--
-
------ ----------------------------------- ---------- -
-- ---------------- --- --------------- -- -------------- --- --------------- -
------ -
------ ----------------
----- --------------
--
-
------ -----
-
-------- -
----- - --------- -- - - -----------
----- - ------ ---- - - -----------
------ -
-----
---------------------
------------- -- -
-------------------
------------ ------ ------
--
-
------
-----------
-------------------
-------------
------------- -- --------------- ------ -------------- ---
--
---------
------------------
------------
------------- -- --------------- ----- -------------- ---
--
------- ---------------------------
-------
--
-
-
------ ------- ---------Action
接下来我们需要定义一些 action，用于描述应用程序中发生的事情。在这个应用程序中，我们可能需要以下四种 Action：
-- -------------------- ---- ------- - ----- ----------- --- -- ------ ----- ------- ----- ----- ----- - - ----- ------------ --- - - - ----- ------------ --- -- ------ ---- ---- ------- ----- ---- ---- ----- - - ----- -------------- --- - -
以下是 memoActions.js 文件的内容：
-- -------------------- ---- ------- --- ---------- - -- ------ ----- ------- - ------- ----- -- -- ----- ----------- --- ------------- ------ ---- --- ------ ----- -------- - ---- -- -- ----- ------------ -- --- ------ ----- -------- - ---- ------ ----- -- -- ----- ------------ --- ------ ---- --- ------ ----- ---------- - ---- -- -- ----- -------------- -- ---
Reducer
最后，我们需要实现 reducer 函数，它将处理要对应用程序状态进行的所有 Action。例如，在收到 ADD_MEMO action 时，它应该将新的备忘录添加到应用程序状态中。
以下是 memoReducer.js 文件的内容：
-- -------------------- ---- -------
----- ------------ - -
------ ---
-------------- ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- ----------
------ -------------
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
-------------- ---------
--
---- ------------
------ -
---------
------ ---------------------- -- -
-- -------- --- ---------- -
------ -
--------
------ -------------
----- -----------
--
-
------ -----
---
-------------- ----
--
---- --------------
------ -
---------
------ ------------------------- -- ------- --- ----------
--
--------
------ ------
-
--
------ ------- ------------Store
最后我们需要创建 Store，即状态容器。我们在 store.js 文件中创建：
import { createStore } from 'redux';
import memoReducer from './reducers/memoReducer';
const store = createStore(memoReducer);
export default store;然后，在应用程序的入口文件中，我们将应用程序根组件 <App> 包裹在一个 Provider 组件中，该组件接受 Redux Store 对象作为参数，并将其传递给应用程序组件树的每个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--现在，我们已经构建好了这个应用程序的所有基本组件。我们可以运行应用程序并测试它是否按照预期工作了。
总结
本文介绍了 React 和 Redux 的基本概念，包括 React 组件、Redux Action 和 Reducer 函数。我们通过一个完整的示例 SPA 项目，深入学习了如何使用 React 和 Redux 管理状态并渲染复杂的 UI。
React 和 Redux 是学习前端开发的必备技能，掌握它们可以极大地提高你的开发效率。本文及其示例代码希望能为初学者提供一个较好的起点，同时也希望能为大家提供一些实际应用场景的思路和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad245448841e989494cdb4