React 是一个流行的 JavaScript 库，用于构建用户界面。Redux 是一个用于管理应用程序状态的 JavaScript 库。这两个库常常被用来一起构建复杂的、可扩展的Web应用。在本篇文章中，我们将提供一个详细的 React+Redux 实用教程。
环境设置
在开始学习 React 和 Redux 之前，需要安装 Node.js 和 npm（或者你可以使用 yarn）。一旦安装完毕，请运行以下代码来确保您已成功安装：
node -v npm -v
React
让我们从 React 开始。React 是一个基于组件的库，它使开发人员可以将用户界面拆分为小而独立的部分。使用 React，你可以构建对用户交互响应迅速的大型应用程序。以下是如何创建基本的 React 应用程序的步骤：
- 从 npm 安装 React 和 ReactDOM：
npm install react react-dom
- 创建一个新的 index.html 文件，并在其中添加以下内容：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------ ----------------
-------
------
---- ----------------
------- --------------------------
-------
-------- 创建一个新的 index.js 文件，并在其中添加以下内容：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello, React!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));- 在终端中运行以下命令：
npx webpack index.js --mode=development
- 在浏览器中打开 index.html 文件，你应该就能看到 "Hello, React!" 的字样了。
Redux
Redux 是一个基于 Flux 架构的 JavaScript 库。它被用来管理应用程序状态，并使状态获取和更改更加容易。以下是如何使用 Redux 的步骤：
- 安装 Redux：
npm install redux
- 创建一个新文件夹，并在其中创建一个名为 reducers.js 的文件，并在其中添加一些 reducer：
-- -------------------- ---- -------
----- ------------- - -
------ --
--
------ ------- -------- ------------- - -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-- 在 index.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ------- ---- ------------- ----- ----- - --------------------- ------------------ -- - ------------------------------------ --- ---------------- ----- ----------- --- ---------------- ----- ----------- --- ---------------- ----- ----------- ---
在代码中，我们创建了一个名为 reducers.js 的文件。这个 reducer 接受一个状态和一个 action，然后返回一个新的状态。在 index.js 文件中，我们使用 createStore 函数来创建一个单一的存储库。我们使用 store.subscribe() 来监听状态更改，并在每次更改时将新状态打印到控制台。我们使用 store.dispatch() 函数来分派不同的 action，以触发 reducer 返回新状态。
React-Redux
React 和 Redux 相互独立，但是它们可以很容易地协同工作。React-Redux 库旨在提高 React 和 Redux 之间的互操作性。以下是使用 React-Redux 的一些步骤：
- 安装 React-Redux：
npm install react-redux
- 创建一个名为 App.js 的文件，并在其中添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
----- --- - -- -- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------ -
-----
---------- ------------
------- ----------- -- ---------- ----- ----------- ----------------------
------- ----------- -- ---------- ----- ----------- ----------------------
------
--
--
------ ------- ----在代码中，我们使用 useSelector() 和 useDispatch() 集成了 Redux。我们使用 useSelector() 函数来选择状态中的一个特定属性。我们使用 useDispatch() 函数来分派不同的 action。
- 修改 index.js 文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ------- ---- -------------
------ --- ---- --------
----- ----- - ---------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在代码中，我们使用 Provider 组件将 store 传递给我们的应用程序。在 App.js 文件中，我们使用 useSelector 和 useDispatch 集成了 Redux。
结论
在本文中，我们提供了一个详细的 React+Redux 实用教程。我们学习了如何创建基本的 React 应用程序、如何使用 Redux 管理应用程序状态以及如何使用 React-Redux 将 React 和 Redux 集成在一起。我们希望这篇文章对您的学习和指导有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c187f14b275ea6fe403d6