Redux 是一个 JavaScript 应用程序状态管理库,它使得管理应用程序的状态变得更加容易和可预测。Redux 可以帮助我们更好地维护大型应用程序,让我们能够更好地应对复杂的状态管理问题。
在本文中,我们将介绍 Redux 的主要概念、设计模式和 API,并提供一些示例代码来演示如何在实践中使用它。
Redux 的主要概念
Redux 的设计基于三个核心概念:状态、动作和 Redux 存储。
状态
状态是我们希望通过应用程序管理的所有数据。Redux 将应用程序状态表示为一个 JavaScript 对象,称为存储。在 Redux 应用中,状态是不可变的,这意味着您不能直接修改状态,而是以一种函数式的方式来操作状态。状态只能通过派遣(dispatch)一个动作(Action)来改变。
动作
动作描述了改变状态的意图。它通常包含一个字符串类型的“类型”属性和一些其他的数据,如 payload。动作是纯粹的、轻量级的对象,并没有任何副作用。任何应用程序中的操作,例如单击按钮、输入表单或定时器事件等都可以被表示为动作。
Redux 存储
Redux 存储是 Redux 应用程序的核心组件。它是一个可以从任何地方访问的 JavaScript 对象。存储拥有当前状态的完整副本,并负责处理派遣(dispatch)动作时的状态更新。当一个动作被派遣到存储中时,它会传递给存储中的一个纯函数,这个函数会基于当前的状态和传递进来的动作计算出一个新的状态。新状态会替换旧状态,这样就完成了状态更新。
Redux 设计模式
Redux 是基于 Flux 架构的,所以它遵循一些常见的设计模式。Redux 应用由以下组件组成:
Store
Redux 存储对象,拥有当前状态的完整副本。
Action
描述了应用程序中某种操作的对象。Action 是一个纯对象,它至少包含一个属性,表示操作的类型。
Reducer
一个纯函数,它接收当前状态和派遣的动作作为参数,并返回新的状态。Reducer 实现并维护应用程序状态的更新逻辑。
Middleware
Redux 中的中间件用于在派遣一个动作时,执行一些额外的逻辑,例如日志记录、异步操作和错误处理等。
Redux API
以下是 Redux 的核心 API。
createStore(reducer, [preloadedState], [enhancer])
该函数用于创建一个 Redux 存储。它接受 3 个参数:reducer、preloadedState 和 enhancer。reducer 是一个接收当前状态和动作的纯函数,用于更新状态;preloadedState 是一个可选参数,它表示应用程序的初始化状态;enhancer 也是一个可选参数,用于扩展 Redux 存储的功能。
store.dispatch(action)
该函数用于将动作派遣到 Redux 存储中。它接受一个单独的参数,即一个动作对象。动作对象必须包含一个类型属性,用于定义动作的类型。
store.subscribe(listener)
该函数用于注册一个监听器,当 Redux 存储中的状态被更新时,这个监听器会被调用。
combineReducers(reducers)
该函数用于将多个 reducer 函数合并成一个单独的 reducer 来更新 Redux 存储中的状态。它接受一个对象作为参数,这个对象的键对应着不同的状态片段,值则对应着与这些状态片段相关的 reducer 函数。
Redux 的简单示例
以下是一个简单的 Redux 应用示例。它展示了如何使用 Redux 存储、动作和 reducer。
------ - ----------- - ---- -------- ----- ------------ - - ------ - -- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - - ----- ----- - --------------------- ---------------- ----- ----------- --- ---------------- ----- ----------- --- ---------------- ----- ----------- --- ------------------ -- -------------------------------
运行这段代码,我们将得到如下的输出:
- ------ - - - ------ - - - ------ - -
以上代码创建了一个 Redux 存储并定义了一个 reducer 函数。初始状态(initialState)包含一个名为 count 的数字属性,其默认值为 0。reducer 函数根据派遣的动作来更新状态。
在这个示例中,我们依次派发了 3 个动作 —— “INCREMENT” 和 2 个 “DECREMENT”,最后的状态被更新为 { count: 1 }。
我们还注册了一个订阅器,以便在状态更新时打印输出状态的当前值。
结论
Redux 提供了一种有效的方法来管理应用程序状态。它是一个可以扩展、可预测和易于维护的状态管理工具。在使用 Redux 时,我们需要了解其主要概念、设计模式和 API。希望本文对 Redux 的初学者有所帮助。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721e1f52e7021665e09314d