Redux 是一个流行的 JavaScript 应用程序状态管理工具。它旨在简化前端应用程序数据的存储和操作,并且能够轻松跨组件维护数据。
虽然 Redux 可以用于任何 JavaScript 应用程序,它最常用于 React 应用程序中。本文将介绍 Redux 的基本概念和工作原理,并提供一些实践经验和示例代码。
Redux 前置知识
在学习 Redux 之前,需要对 JavaScript 有一定的了解。特别是需要对闭包、函数式编程和 ES6 等语言特性有一定的掌握。如果您还没有学习这些知识,我们建议您先学习这些主题。
在这里提到的一些重要概念包括:
- 函数式编程
- 纯函数
- 组合
- 核心 Redux 概念:state、action、reducers 和 store
- React 组件在 Redux 中的作用
Redux 概述
Redux 是一个状态容器,它允许我们将应用程序数据存储在一个单独的地方,而不是分散在多个组件中。它允许我们通过 store 总体掌握应用程序状态。
核心概念
Redux 包含以下核心概念:
- State:应用程序数据,以单一对象形式呈现。
- Action:对 State 进行操作的对象,包含一个 action 类型和一个可选数据负载。
- Reducer:一个纯函数,根据 Action 的类型来更新 State。
- Store:将 State、Action 和 Reducer 结合在一起的对象。Store 通过 dispatch 方法来处理 Action,Reducer 根据 Action 类型更新 State。Store 可以通过 subscribe 方法添加监听器。
三大原则
Redux 的设计受到了 Flux 架构的启发,但是有一些重要区别。下面是 Redux 设计的三个基本原则:
- 单一状态树:应用程序的所有状态都存储在一个单一对象中。
- 状态只读:不能直接改变状态,需要触发一个 Action。
- 纯函数更新状态:Reducer 是一个纯函数,它可以根据 Action 的类型和可选负载更新 State。
Redux 实践
在 Redux 应用中,React 组件会通过 dispatch 发送一个 action,然后 Reducer 函数会修改状态树,Redux 使用 store 来组织状态,通过 store 来派发更新,更新后渲染组件。
下面是一个使用 Redux 实现 To-Do App 的示例。
Store
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ----- -------- - ----------- ----- ------------ - - ------ -- -- -------- ------------------ - ------------- ------- - ------ ------------- - ---- --------- ------ - --------- ------ ---------------- --------------- -- -------- ------ ------ - - ----- ----- - -------------------------- ------ ------- ------
Action Creator
-- -------------------- ---- ------- ----- -------- - ----------- -------- ----------------------- - ------ - ----- --------- -------- - ----- -------- - -- - ------ - --------- ------------- --
React 组件
-- -------------------- ---- ------- ------ ---------- ------------- - ---- ------------------ -------- -------------- - ------------------- ----- -------- - ----------------------------- -- ---------------- - -- - ---------------------------------------- --------------------- - --- - - ------ ------- -------- ---------- - ----- - ------ -------- - - --------------------------------- ----- ------- - ------------------- ----- ----- - ----------- -- --- ------------------ -- - ----- ----------- - ------------------ -- ---------------------------- ------ ------------ -- ---- ------ - ----- ----------------- -- - ---- ------------------------------- --- ----- ----------------------- ------ ------------- -- ------- ------------------------- ------- ------ -- -
在上面的示例中,我们首先创建了一个 Store,并将 todosReducer 函数作为参数传入。todosReducer 函数返回了一个新的 State 对象,根据 Action 的类型更新 State。Store 可以通过 getState 方法来获取状态。
我们还创建了一个 ADD_TODO 类型的 action creator,用于向 Store 发送操作指令。我们将该 action creator 导出,方便其他组件调用。
在 React 组件中,我们使用了高阶组件 useEffect
监听 Store 的 update 事件,每次修改渲染 UI。handleClick 函数接受表单数据,调用添加 Action Creator 的方法,并将 todoText 传递给 reducer 处理。
总结
Redux 是一个流行的前端状态管理工具,它有很多强大的特性,是 React 中最佳的存储库之一。本文介绍了 Redux 的核心概念和工作原理,并提供了一个使用 Redux 和 React 实现 To-Do App 的示例。学习 Redux 的过程中,学习一些高级概念和设计模式是必须的,但是纯函数的理解和实现,是入门 Redux 的首要难点。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c933605ad90b6d04161e84