在前端开发中，我们经常会遇到复杂的状态管理问题。为了解决这些问题，Redux 应运而生。Redux 是一个 JavaScript 应用程序状态容器，它提供了一种可预测的状态管理方案。而 React-Redux 是 Redux 的官方绑定库，它帮助我们将 Redux 和 React 应用程序连接起来，使我们能够更好地管理 React 应用程序的状态。
Redux 概述
Redux 的核心思想是将应用程序的状态保存在一个全局的 store 中。可以通过 action 来触发 store 中的状态改变，实现一种可预测的状态管理方案。下面我们来看一下 Redux 的一些核心概念。
Store
store 是 Redux 中的核心概念。它是状态树的唯一来源，如果你想更新状态就要通过调用 store 中的 dispatch 方法来触发一个 action。
我们可以通过 createStore 方法来创建一个 store。createStore 方法接受一个 reducer 方法作为参数。reducer 方法会在 dispatch action 后执行，并且返回一个新的 state。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------------Action
Action 是一个对象，它描述了发生了什么事件。一个 action 对象必须有一个 type 属性，其它属性可以根据需要添加。例如：
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };Reducer
reducer 是一个纯函数，它接受当前的 state 和一个 action 作为参数，然后返回一个新的 state。Redux 应用程序中所有的状态变更都由 reducer 函数处理。
一个 reducer 函数通常会使用 switch 语句来根据 action 的 type 属性处理状态变更，例如前面我们提到的计数器案例：
-- -------------------- ---- -------
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-Store 的使用
现在我们来看一下 store 的使用方法。我们可以使用 store.getState() 方法来获取当前 store 中的状态，使用 store.dispatch() 方法来触发一个 action，使用 store.subscribe() 方法来订阅 store 中的状态变更。
store.subscribe(() => {
const state = store.getState();
console.log(state.count);
});
store.dispatch(incrementAction);在上面的例子中，我们使用 subscribe 方法来订阅 store 中的状态变更，当使用 dispatch 方法触发一个 action 后，subscribe 方法就会被触发，我们可以在回调函数中获取 store 中最新的状态。
React-Redux 概述
React-Redux 是 Redux 的官方绑定库，它允许我们更容易地将 Redux 和 React 应用程序连接起来。React-Redux 的核心概念是将组件分为两类：Presentational Component 和 Container Component。
Presentational Component
Presentational Component 负责展示数据和处理用户交互，完全无状态，只接受 props 作为参数，并通过回调来通知 Container Component。例如：
-- -------------------- ---- -------
-------- -------------- -
----- - ------ ------------ ----------- - - ------
------ -
-----
----------------
------- ----------------------------------------
------- ----------------------------------------
------
--
-Container Component
Container Component 负责与 Redux 交互，处理数据和业务逻辑，维护 Presentational Component 的状态，并将状态通过 props 传递给 Presentational Component。Container Component 拥有自己的状态，并处理 Presentational Component 触发的回调。例如：
-- -------------------- ---- -------
-------- ------------------ -
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- --------------- - -------------- -- -
---------- ----- ----------- ---
-- ------------
----- --------------- - -------------- -- -
---------- ----- ----------- ---
-- ------------
------ -
-------- ------------- ----------------------------- ----------------------------- --
--
-在上面的例子中，我们使用 useSelector 和 useDispatch Hook 来连接 Redux。useSelector 接受一个函数作为参数，将 state 映射到组件的 props 中。useDispatch 返回一个 dispatch 函数，可以用来触发一个 action。
React-Redux 的使用
现在我们来看一下 React-Redux 的使用方法。首先需要使用 Provider 来提供 store：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ----- - ----------------------------
-------- ----- -
------ -
--------- --------------
----------------- --
-----------
--
-接下来在 Container Component 中使用 useSelector 和 useDispatch Hook 连接 Redux。以计数器案例为例：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
-------- ------------------ -
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- --------------- - -------------- -- -
---------- ----- ----------- ---
-- ------------
----- --------------- - -------------- -- -
---------- ----- ----------- ---
-- ------------
------ -
-------- ------------- ----------------------------- ----------------------------- --
--
-最后，在 Presentational Component 中使用 props 来展示数据和处理用户交互：
-- -------------------- ---- -------
-------- -------------- -
----- - ------ ------------ ----------- - - ------
------ -
-----
----------------
------- ----------------------------------------
------- ----------------------------------------
------
--
-总结
Redux 和 React-Redux 提供了一种可预测的状态管理方案，可以帮助我们更好地管理 React 应用程序的状态。Redux 存储状态并通过 action 触发状态更新，而 React-Redux 将组件分为 Presentational Component 和 Container Component，提供了一种连接 Redux 的方式。
希望通过这篇文章，你可以了解 Redux 和 React-Redux 的基本概念，以及如何在 React 应用程序中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462d786968c7c53b03e7586