简介
Redux 是一个 JavaScript 应用程序的状态容器，同时也是一个状态管理框架。它提供了可预测性、可维护性和可测试性，帮助开发者更好地构建大型复杂应用。Redux 独立于任何 UI 库，因此可以用于 React，Angular，Vue 甚至纯 JavaScript 应用程序。
Redux 基本思想是将应用程序的状态存储到一个单一的状态对象中，通过一个严格的流程控制每一次状态的变更。这种单向数据流的方式使得状态变更可控，同时也容易调试和维护。
核心概念
Action
Action 是一个普通的 JavaScript 对象，用于描述状态变更的动作。它必须包含一个 type 字段，表示动作的类型。其他字段根据具体应用场景而定，例如更新数据、请求网络数据等。
{
type: 'ADD_TODO',
text: 'Learn Redux'
}Reducer
Reducer 是一个纯函数，用于描述状态的变更。它接收一个当前状态和一个 action 对象，并返回一个新的状态。Reducer 必须是纯函数，它不应该产生任何副作用，也不应该对传入的参数进行修改。
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- ------------
---------- -----
-
-
--------
------ -----
-
-Store
Store 是一个应用程序的中心化状态容器，负责管理应用程序的状态。它只接收一个 reducer，一旦创建便无法更改。应用程序的状态存储在一个单一的状态树中。
import { createStore } from 'redux'
import todos from './reducers'
const store = createStore(todos)Dispatch
通过 dispatch 方法，我们可以触发一个 Action，使得 Reducer 进行相应的状态变更。这是唯一能够改变状态的方法。
store.dispatch({
type: 'ADD_TODO',
text: 'Learn Redux'
})示例代码
下面是一个简单的 Todo List 应用程序的示例代码。
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- -------- - ----------
----- ----------- - -------------
----- --------------------- - -----------------------
----- ----------------- - -
--------- -----------
--------------- -----------------
------------ -------------
-
-------- ------- ------ -
------ - ----- --------- ---- -
-
-------- ---------- ------- -
------ - ----- ------------ ----- -
-
-------- ------------------- -------- -
------ - ----- ---------------------- ------ -
-
-------- ----- ------ - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- -----
-
-
---- ------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
--
-
------ ----
--
--------
------ -----
-
-
-------- ---------------- ------ - --------------------------- ------- -
------ ------------- -
---- ----------------------
------ -------------
--------
------ -----
-
-
-------- ------- ------ - --- ------- -
------ -
------ ------------------ --------
----------------- ---------------------------------------- -------
-
-
----- ----- - --------------------
-----------------------------
----- ----------- - ------------------ -- -
-----------------------------
--
----------------------------- --------
----------------------------- --------
-----------------------------
---------------------------------------------------------------------
-------------总结
Redux 提供了一个可预测、可维护和可测试的方式来管理应用程序的状态。它的核心概念包括 Action，Reducer，Store 和 Dispatch。通过一个严格的流程控制每一次状态的变更，使得状态变更可控，同时也容易调试和维护。可以将 Redux 与任何 UI 库一起使用，包括 React、Angular、Vue 甚至纯 JavaScript 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659684b4eb4cecbf2da54661