在上一篇文章中，我们了解了 Redux 的基本概念和工作原理，本篇文章将深入探讨 Redux 的基础应用。
Redux 中的 Action
Redux 中的 Action 是一个包含数据的对象，用于描述发生了什么事情。例如，我们可以定义一个增加计数器值的 Action：{ type: 'INCREMENT', payload: 1 }，其中 type 字段表示 Action 的类型，payload 字段表示 Action 携带的数据。
一般来说，Action 会被封装为一个函数，称为 Action Creator。例如，定义一个增加计数器值的 Action Creator 可以这样写：
function increment(value) {
return { type: 'INCREMENT', payload: value };
}Redux 中的 Reducer
Redux 中的 Reducer 是一个纯函数，用于处理 Action 并返回新的状态。Reducer 接收两个参数：当前状态和 Action，然后根据 Action 的类型返回新的状态。例如，我们可以定义一个计数器 Reducer：
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - ---------------
--------
------ ------
-
-在 Redux 应用中，通常会有多个 Reducer，每个 Reducer 只负责处理全局状态中的一部分数据。
Redux 中的 Store
Redux 中的 Store 是应用的唯一数据源，用于存储全局状态。Store 通过 Reducer 更新状态，每次更新都会生成一个新的状态。可以通过 store.getState() 方法获取当前状态。例如，定义一个 Store 并连接计数器 Reducer 可以这样写：
import { createStore } from 'redux';
const store = createStore(counterReducer);Redux 的基础使用
使用 Redux 的基本流程如下：
- 定义 Action 和 Action Creator
- 定义 Reducer
- 创建 Store 并连接 Reducer
- 分发 Action 修改状态
- 监听状态变化
下面我们将通过一个简单的示例来了解如何使用 Redux。
示例代码
我们使用 React 和 Redux 实现一个简单的计数器应用，在页面上点击按钮可以增加或减少计数器的值。
Action 和 Action Creator
定义 increment 和 decrement Action 和对应的 Action Creator：
-- -------------------- ---- ------- ------ ----- --------- - ------------ ------ ----- --------- - ------------ ------ -------- ---------------- - ------ - ----- ---------- -------- ----- -- - ------ -------- ---------------- - ------ - ----- ---------- -------- ----- -- -
Reducer
定义计数器 Reducer：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ------------
------ ------- -------- -------------------- - -- ------- -
------ ------------- -
---- ----------
------ ----- - ---------------
---- ----------
------ ----- - ---------------
--------
------ ------
-
-Store
创建 Store 并连接 Reducer：
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);分发 Action
在 React 组件中分发 Action：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- ------- --------------- -
--------------- - -- -- -
------------------------
--
--------------- - -- -- -
------------------------
--
-------- -
------ -
-----
-------------------------------
------- -----------------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ - ------ ----- --
-
----- ------------------ - - ---------- --------- --
------ ------- ------------------------ -----------------------------监听状态变化
通过 store.subscribe 方法监听 Store 中状态的变化：
store.subscribe(() => {
console.log(store.getState());
});总结
本篇文章深入探讨了 Redux 的基础应用，让我们了解了如何定义 Action 和 Action Creator、定义 Reducer、创建 Store 并连接 Reducer、分发 Action 修改状态以及监听状态变化。通过这些应用，相信读者已经对 Redux 的基础使用有了更深入的理解。在实际项目中，Redux 的应用也是非常灵活的，可以为开发者提供更多的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65227c9295b1f8cacd9f9bb0