什么是 Redux
Redux 是一个 JavaScript 应用程序的状态管理库，它提供了可预测的状态容器以及可维护性和可测试性的应用程序的架构。Redux 可以与 React、Angular、Vue 等前端框架一起使用，但它本身并不依赖于任何特定的视图层库。
Redux 的主要思想是将应用程序的状态保存在一个单一的、可预测的状态容器中，并使用纯函数来更新状态。这种方法使得状态变化的过程变得可控可预测，从而简化了应用程序的复杂度。
Redux 核心概念
Store
Redux 中的 store 是应用程序状态的容器。它是一个包含整个应用程序状态的 JavaScript 对象。我们可以通过调用 createStore 函数来创建一个 store。
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - -------------------------
Action
Action 是一个描述状态变化的普通 JavaScript 对象。它包含一个 type 属性来描述状态变化的类型，并可以包含其他任意属性来描述状态变化的具体内容。
----- -------- - ----------- ----- ------- - ------ -- -- ----- --------- ----- --- ----------------------------- ---------
Reducer
Reducer 是一个纯函数，它接收当前状态和一个 action 对象作为参数，并返回一个新的状态。Reducer 的作用是根据 action 对象的类型来更新状态。
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- ------
-
--
--------
------ ------
-
--
----- ----------- - -----------------
------ -------------
---
----- ----- - -------------------------Dispatch
Dispatch 是一个函数，它接收一个 action 对象作为参数，并将该 action 对象发送给 store。当 store 接收到一个 action 对象时，它会调用 reducer 函数来更新状态。
----------------------------- ---------
Subscribe
Subscribe 是一个函数，它接收一个回调函数作为参数，并在 store 中的状态发生变化时调用该回调函数。
------------------ -- - ------------------------------ ---
Redux 源码分析
Redux 的源码主要分为三个部分：store、reducer 和 middleware。
Store
Redux 中的 store 是通过 createStore 函数创建的。createStore 函数接收一个 reducer 函数作为参数，并返回一个 store 对象。
------ ------- -------- -------------------- --------------- --------- -
-- ---
------ -
---------
----------
---------
---------------
--------------- ----------
--
-store 对象包含了 dispatch、subscribe、getState、replaceReducer 和 [$$observable] 等方法和属性。
Reducer
Redux 中的 reducer 函数是根据 action 对象的 type 属性来更新状态的。reducer 函数接收当前状态和一个 action 对象作为参数，并返回一个新的状态。
------ ------- -------- ------------------------- -
----- ----------- - ----------------------
----- ------------- - ---
--- ---- - - -- - - ------------------- ---- -
----- --- - ---------------
-- ------- ------------- --- ----------- -
------------------ - --------------
-
-
----- ---------------- - ---------------------------
------ -------- ----------------- - --- ------- -
--- ---------- - ------
----- --------- - ---
--- ---- - - -- - - ------------------------ ---- -
----- --- - --------------------
----- ------- - -------------------
----- ------------------- - -----------
----- --------------- - ---------------------------- --------
-------------- - ----------------
---------- - ---------- -- --------------- --- --------------------
-
------ ---------- - --------- - ------
--
-combineReducers 函数接收一个对象作为参数，该对象包含多个 reducer 函数。combineReducers 函数返回一个新的 reducer 函数，该函数将所有 reducer 函数合并成一个新的 reducer 函数。
Middleware
Redux 中的 middleware 是一种函数，它可以在 action 到达 reducer 前对 action 进行拦截和处理。middleware 可以用于实现日志记录、异步处理等功能。
------ ------- -------- ------------------------------- -
------ ------------- -- --------- --------------- --------- -- -
----- ----- - -------------------- --------------- ----------
--- -------- - ---------------
--- ----- - ---
----- ------------- - -
--------- ---------------
--------- -------- -- -----------------
--
----- - -------------------------- -- ---------------------------
-------- - ----------------------------------
------ -
---------
---------
--
--
-applyMiddleware 函数接收多个 middleware 函数作为参数，返回一个新的函数，该函数接收 createStore 函数作为参数，返回一个增强版的 createStore 函数。
总结
Redux 是一个 JavaScript 应用程序的状态管理库，它提供了可预测的状态容器以及可维护性和可测试性的应用程序的架构。Redux 的核心概念包括 store、action、reducer、dispatch 和 subscribe。Redux 的源码主要分为三个部分：store、reducer 和 middleware。熟练掌握 Redux 的核心概念和源码可以帮助我们更好地理解和使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66156650d10417a222584de1