介绍
React 和 Redux 是现代化的前端技术，在构建富交互 Web 应用和单页应用时广泛应用。React 是一个用于构建 UI 界面的 JavaScript 库，而 Redux 是一个用于管理应用状态的 JavaScript 库。React 相当于视图层，Redux 则相当于数据层。
本文将详细介绍如何使用 React 和 Redux 构建现代化的客户端应用，并提供示例代码，以便读者能够深入了解 React 和 Redux 的应用。
React 基础
React 是一个用于构建 UI 界面的 JavaScript 库，其核心思想是组件化。组件是 React 中的基本单位，开发者可以使用 JSX（JavaScript XML）语法来描述组件结构。以下是一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ ---------- ------------
-
-
------ ------- ------------在上述代码中，“Hello, world!” 为该组件的渲染结果。我们可以将该组件放到页面中：
import React from 'react';
import { render } from 'react-dom';
import MyComponent from './MyComponent';
render(<MyComponent />, document.getElementById('root'));上述代码将组件渲染到了页面的根节点，即 <div id="root"></div> 中。
Redux 基础
Redux 是一个用于管理应用状态的 JavaScript 库。Redux 的核心思想是单一数据源、状态只读、纯函数修改状态。Redux 中的三个基本概念是：store、action 和 reducer。
store
store 是 Redux 中管理应用状态的核心对象。store 中存储了应用状态，提供了 getState()、dispatch() 和 subscribe() 三个方法。
- getState()：获取当前的应用状态。
- dispatch(action)：派发 action 来触发状态修改。
- subscribe(listener)：订阅 store 中状态的变化。
以下是如何创建一个 Redux store 的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
--- ----- - ---------------------上述代码中，counter 是一个 reducer，它接收当前的状态和一个 action，根据 action 的类型来更新状态。createStore 方法接收 reducer 并返回一个 store 对象。
action
action 是一个包含 type 属性的普通对象，描述了发生了什么。例如，在上述示例中，INCREMENT 和 DECREMENT 就是两个 action 类型，对应于加1和减1的操作。
下面是一个 action 的示例：
{
type: 'INCREMENT',
payload: 1
}reducer
reducer 是一个纯函数，接收当前的应用状态和一个 action，返回一个新的应用状态。reducer 的主要作用是通过 action 来更新状态，遵循状态只读、纯函数修改状态的原则。
以下是一个示例 reducer：
-- -------------------- ---- -------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - ---------------
--------
------ ------
-
-组合 React 和 Redux
React 和 Redux 的组合非常自然，两者的思想都是组件化，都提供了单向数据流。我们把组件分为容器组件和展示组件，容器组件负责与 Redux 交互，展示组件负责渲染 UI。
以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
-------- -
------ ----------------------------
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- --------------------------------------上述代码中，connect 方法用于连接组件和 Redux，mapStateToProps 方法用于将应用状态映射到组件的 props 中。
使用 React 和 Redux 构建现代化客户端应用
在上述基础上，我们可以使用 React 和 Redux 构建一个复杂的客户端应用。以下是一个示例应用，包含了登录、路由、异步请求等功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ------ - ---- -------------------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ---- - ---- -------------------------
------ --------- ---- --------------
------ --------- ---- --------------
------ - ------ -------- - ---- -------------
----- --- ------- --------------- -
------------------- -
----- - --------- ---- - - -----------
-------------------- -- -
-- ------- -
---------------
-
---
-
----------- - ---------- --------- -- -
----- - ----- - - -----------
------ --------------- ----------------- -- -
---------------------
---
--
-------- -
------ -
------- -----------------------------
--------
------ ------------- ---------- -- ---------- -------------------------- --- --
------ -------- --------------------- --
---------
---------
--
-
-
----- ------------------ - -------- --
-------------------
-
------
---------
----
--
--------
--
------ ------- ------------- -------------------------上述代码中，LoginForm 组件用于显示登录表单，Dashboard 组件用于显示用户信息。在 App 组件中，我们使用 loadUser 方法来检查用户是否已登录，如果未登录则跳转到登录页面。在登录成功后，我们使用 push 方法将用户重定向到首页。
总结
React 和 Redux 是现代化的前端技术，在构建富交互 Web 应用和单页应用时广泛应用。本文详细介绍了如何使用 React 和 Redux 构建现代化的客户端应用，并提供了示例代码。希望本文能为读者提供深入了解 React 和 Redux 的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65338bb07d4982a6eb718c1d