前言
Redux 是一个流行的 JavaScript 状态管理库，它被广泛应用于 React 应用程序中。Redux 的主要目的是使应用程序的状态管理更加可预测和易于开发。本指南将帮助初学者理解 Redux 的基本概念，并提供一些实用的指导意义和示例代码。
Redux 的基本概念
Store
Redux 应用程序的核心是 Store。它是一个包含应用程序状态的 JavaScript 对象。Store 可以通过 createStore 函数进行创建，该函数需要传入一个 reducer 函数作为参数。Reducer 是一个纯函数，用于处理应用程序状态的变化。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------Action
Action 是一个包含 type 属性的简单 JavaScript 对象。它描述了应用程序状态的变化。例如，当用户点击“增加计数器”按钮时，可以派发一个 INCREMENT 类型的 Action。
const incrementAction = { type: 'INCREMENT' };Dispatch
Dispatch 是一个用于触发 Action 的函数。当 Action 被派发时，Store 将调用 reducer 函数，并使用 Action 中的类型属性更新状态。
store.dispatch(incrementAction);
Subscribe
Subscribe 是一个用于监听 Store 变化的函数。每当 Store 更新时，它将被调用。
store.subscribe(() => {
console.log(store.getState());
});Redux 的指导意义
拆分应用程序状态
Redux 可以帮助我们将应用程序状态拆分为多个小块。这有助于使状态更加可预测和易于管理。例如，对于一个购物车应用程序，我们可以将购物车状态和用户状态分开管理。
-- -------------------- ---- -------
----- ------------ - -
----- - ------ -- --
----- - ----- ---- --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
----- - ------ --------------------- --------------- --
--
---- --------
------ - --------- ----- - ----- -------------- - --
--------
------ ------
-
-使用中间件
Redux 中间件是一个可以在 Action 被派发到 reducer 之前或之后执行的函数。它可以用于实现异步操作、日志记录、错误处理等功能。常用的中间件包括 redux-thunk、redux-saga、redux-logger 等。
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { applyMiddleware, createStore } from 'redux';
const store = createStore(reducer, applyMiddleware(thunk, logger));使用 React-Redux
React-Redux 是一个官方的 React 绑定库，它可以帮助我们更方便地在 React 应用程序中使用 Redux。它提供了 Provider 和 connect 两个组件，分别用于将 Store 传递给组件和将组件连接到 Store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ------- - ---- --------------
-------- ----- ------ ---------- --------- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
-
----- --------------- - ----- -- -- ------ ----------- ---
----- ------------------ - - ---------- -- -- -- ----- ----------- --- ---------- -- -- -- ----- ----------- -- --
----- ------------ - ------------------------ -------------------------
-------- ------ -
------ -
--------- --------------
------------- --
-----------
--
-结论
Redux 是一个强大的 JavaScript 状态管理库，它可以帮助我们更好地管理应用程序状态。本指南介绍了 Redux 的基本概念、指导意义和示例代码，希望能够帮助初学者更好地理解和使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676322fb856ee0c1d4181f51