Redux 是一种用于 JavaScript 应用程序的可预测状态容器，它可以管理应用程序中的所有状态。Redux 可以帮助开发人员更好地组织和维护应用程序的状态，并提供了一种可预测的状态管理方案。
本文将介绍 Redux 的实现简化及常用 API，以帮助前端开发人员更好地理解和使用 Redux。
Redux 的实现简化
Redux 的实现可以分为三个部分：store、reducer 和 action。
Store
Store 是 Redux 的核心部分，它是一个状态容器，包含了应用程序的所有状态。Store 可以通过 getState() 方法获取当前状态，通过 dispatch(action) 方法触发状态的改变。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ---------------------上述代码中，我们通过 createStore() 方法创建了一个 Store，其中 reducer 函数用于处理 action 并返回新的状态。
Reducer
Reducer 是一个函数，用于处理 action 并返回新的状态。Reducer 接收两个参数：当前状态和 action，返回新的状态。
-- -------------------- ---- -------
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-上述代码中，我们定义了一个 reducer 函数，当接收到 INCREMENT 或 DECREMENT action 时，会更新 count 属性的值。
Action
Action 是一个普通对象，用于描述状态的变化。Action 必须包含一个 type 属性，用于描述状态的变化类型。
const incrementAction = {
type: 'INCREMENT',
};
const decrementAction = {
type: 'DECREMENT',
};上述代码中，我们定义了两个 action：INCREMENT 和 DECREMENT。
Redux 常用 API
Redux 提供了一些常用的 API，用于管理应用程序的状态。
createStore(reducer, [preloadedState], [enhancer])
createStore() 方法用于创建一个 Store。它接收三个参数：reducer、preloadedState 和 enhancer。
- reducer：一个函数，用于处理 action 并返回新的状态。
- preloadedState：可选参数，用于初始化状态。
- enhancer：可选参数，用于增强 Store 的功能。
const store = createStore(reducer, initialState);
上述代码中，我们通过 createStore() 方法创建了一个 Store，其中 reducer 函数用于处理 action 并返回新的状态，initialState 用于初始化状态。
store.getState()
getState() 方法用于获取当前状态。
const state = store.getState();
上述代码中，我们通过 getState() 方法获取当前状态。
store.dispatch(action)
dispatch() 方法用于触发状态的改变。
store.dispatch(incrementAction);
上述代码中，我们通过 dispatch() 方法触发了 INCREMENT action。
store.subscribe(listener)
subscribe() 方法用于监听状态的变化。
store.subscribe(() => {
console.log(store.getState());
});上述代码中，我们通过 subscribe() 方法监听了状态的变化，并在状态变化时打印新的状态。
示例代码
下面是一个使用 Redux 的计数器示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-
----- --------------- - -
----- ------------
--
----- --------------- - -
----- ------------
--
----- ----- - ---------------------
------------------ -- -
------------------------------
---
--------------------------------
--------------------------------
--------------------------------上述代码中，我们通过 createStore() 方法创建了一个 Store，通过 reducer 函数处理 action 并返回新的状态。我们定义了 INCREMENT 和 DECREMENT 两个 action，并通过 dispatch() 方法触发了状态的改变。最后，我们通过 subscribe() 方法监听了状态的变化，并在状态变化时打印新的状态。
总结
本文介绍了 Redux 的实现简化及常用 API，通过示例代码演示了如何使用 Redux 实现一个计数器。Redux 是一个非常强大的状态管理工具，可以帮助开发人员更好地组织和维护应用程序的状态。希望本文能够帮助读者更好地理解和使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cdac3fadd4f0e0ff6dcecc