前言
React 是一个非常流行的前端框架，它被广泛应用于构建单页面应用程序。Redux 是一个状态管理工具，它可以让我们更好地管理 React 应用程序的状态。如果你想要打造一个功能强大的 React 应用程序，那么使用 Redux 无疑是一个非常不错的选择。
在本文中，我们将介绍 Redux 的基本概念和用法，并通过一个示例代码来演示如何使用 Redux 打造一个 React 应用程序。
Redux 的基本概念
Redux 的核心概念是 store、action 和 reducer。
store
store 是 Redux 中存储应用程序状态的地方。它是一个 JavaScript 对象，包含了应用程序中所有的状态。我们可以通过 store.getState() 方法来获取当前的状态，通过 store.dispatch(action) 方法来更新状态。
action
action 是一个描述状态变化的对象。它必须包含一个 type 属性，用于描述状态变化的类型。除此之外，action 还可以包含其他任意属性，用于描述状态变化的具体内容。
reducer
reducer 是用于更新状态的函数。它接收当前的状态和一个 action 对象作为参数，并返回一个新的状态。注意，reducer 必须是一个纯函数，即相同的输入永远产生相同的输出，不会产生任何副作用。
Redux 的用法
使用 Redux 需要遵循以下步骤。
安装 Redux
我们可以使用 npm 或 yarn 来安装 Redux。
npm install redux
或者
yarn add redux
创建 store
我们可以使用 createStore() 方法来创建一个 store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们首先定义了一个初始状态 initialState，然后定义了一个 reducer 函数。这个 reducer 函数接收一个 state 和一个 action，根据 action 的类型来更新 state。最后，我们使用 createStore() 方法来创建了一个 store。
发送 action
我们可以使用 store.dispatch() 方法来发送一个 action。
store.dispatch({
type: 'INCREMENT'
});在上面的代码中，我们向 store 发送了一个 type 为 'INCREMENT' 的 action。
获取状态
我们可以使用 store.getState() 方法来获取当前的状态。
const state = store.getState(); console.log(state.count);
在上面的代码中，我们获取了当前的状态，并打印出了 count 属性的值。
监听状态变化
我们可以使用 store.subscribe() 方法来监听状态变化。
store.subscribe(() => {
const state = store.getState();
console.log(state.count);
});在上面的代码中，我们使用 subscribe() 方法来监听状态变化，并在状态变化时打印出 count 属性的值。
示例代码
下面是一个使用 Redux 打造的简单的计数器应用程序。
安装依赖
首先，我们需要安装一些依赖。
npm install react react-dom redux react-redux
创建组件
我们创建一个 Counter 组件，用于显示当前的计数值，并提供两个按钮用于增加和减少计数值。
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- ------ ------------ ----------- -- -
------ -
-----
--------- -----------
------- --------------------------------
------- --------------------------------
------
--
-
------ ------- --------在上面的代码中，我们使用了 props 来传递计数值和增加减少计数值的方法。
创建 store
我们创建一个 store，用于存储计数值。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们定义了一个初始状态 initialState，然后定义了一个 reducer 函数，根据 action 的类型来更新 state。最后，我们使用 createStore() 方法来创建了一个 store。
创建容器组件
我们创建一个 CounterContainer 容器组件，用于将 store 中的状态映射到 Counter 组件的 props 中，并将增加减少计数值的方法映射到 Counter 组件的 props 中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ------- ---- ------------
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
------------ -- -- ---------- ----- ----------- ---
------------ -- -- ---------- ----- ----------- --
--
-
----- ---------------- - ------------------------ -----------------------------
------ ------- -----------------在上面的代码中，我们使用 connect() 方法将 mapStateToProps 和 mapDispatchToProps 映射到 Counter 组件的 props 中，并将 Counter 组件包裹在一个容器组件中。
渲染应用程序
我们创建一个 App 组件，用于渲染整个应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ---------------- ---- ---------------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
----------------- --
-----------
--
-
------ ------- ----在上面的代码中，我们使用 Provider 组件将 store 传递给整个应用程序，并将 CounterContainer 渲染到应用程序中。
启动应用程序
最后，我们创建一个 index.js 文件，用于启动应用程序。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));在上面的代码中，我们使用 ReactDOM.render() 方法将 App 组件渲染到页面中。
总结
使用 Redux 可以让我们更好地管理 React 应用程序的状态。在本文中，我们介绍了 Redux 的基本概念和用法，并通过一个示例代码演示了如何使用 Redux 打造一个 React 应用程序。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6555c1c1d2f5e1655d023a8a