什么是 Redux
Redux 是一种 JavaScript 应用程序状态管理工具。在 Redux 中,您的程序状态被存储在一个全局存储区域(称为“Store”)中,这个存储区域存储着所有程序的“状态”。一个组件可以将它自己的状态中的一部分存储到这个 Store 中,然后在将来,这个组件就可以从 Store 中取回这个状态。因此,Redux 可以让您对整个应用程序的状态管理进行更好的控制。同时,Redux 也是 React 技术栈中必不可少的一部分。
Redux 的工作原理
Redux 的工作原理可以概括为 3 个步骤:运行第一次,监听,执行。
运行第一次
首先,Redux 中的 Store 存储区域被创建。这个存储区域被创建为一个纯 JavaScript 对象,并且通常是一个空对象。
----- ------------ - --- -- -----
其次,在 Redux 中,可以实现多种中间件,这些中间件可以用来适应各种特定场景。Redux 中最常用的中间件是 redux-thunk
,它允许我们在 Action 声明中进行异步操作。因此,我们需要将 redux-thunk
注入到 Redux 的 applyMiddleware() 中。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ---------------- ----- ----- - ------------------------ ------------- ------------------------
现在,我们在创建 Store 的时候,将以上代码传递给 createStore() 方法。现在,您可以将组件的数据存储到 Store 中,这通常是通过 dispatch
方法来完成。通过 dispatch,操作将发送到 Store,这里处理就可以被完成了。
---------------- ----- ----------- -------- ------ ------ ---
在这个例子中,{ type: 'ADD_TODO', payload: 'Learn Redux' }
是一个 Redux Action 声明。它指定要添加一条新的代办事项到 Store 中,其负载为“学习Redux”。
监听和更新
一旦您的 Store 中有了数据,Redux 就可以通过调用相关的 Reducer 函数,并传递当前的状态和 Action 声明,来将新状态合并到 Store 中。Reducer 函数返回的新状态将会被更新到 Store 中。
-- ---------- ----- ----------- - ------ - --- ------- -- - ------ ------------- - ---- ----------- ------ ----------------- ------ - ------ ---------------- - ----- -------------- -- --- -------- ------ ------ - -- ------ ------- ------------
在这个例子中,Reducer 函数将添加一个新的 Todo 到 Store 中。
一旦 Store 中的新状态被更新,那么通过订阅 Store 的监听器,会调用可用的回调函数。这是 Redux 中主要的订阅模式,并用于处理数据的变更。在 React 中,这通常是通过侦听 Store 中的更改来“重新绘制”组件的 UI。
--- ----------- - ------------------ -- ------------------------------- -- -------- -- ---- ------ - - ----- ------ ------ - - -
执行
在 Store 的状态被更新后,React 可以通过调用存储在 Store 中的新状态来重新渲染 UI。这是整个 Redux 工作原理的最后一步。
Redux 常见问题的解决方案
如何处理异步操作
Redux 是一个同步状态管理工具。但是当应用程序具有复杂的异步逻辑时,Redux 的同步性就可能导致问题。为了解决这个问题,我们可以使用 redux-thunk
或 redux-saga
中间件来对 Action 声明进行异步操作。
例如,在使用 Redux 与 API 一起构建应用程序时,可以使用 fetch
方法来获取数据。如下所示:
------ ----- ---- ------------------- ------ ----- ------------- - ---------------- -------- ------------------- - ------ - ----- -------------- ----- -- - ------ ----- ------------- - ---------------- -------- ----------------------- - ------ - ----- -------------- --------- -- - ------ -------- --------------------- - ------ ------------------ - ---------------------------------- ------ -------------------------------------------------- -------------- -- ---------------- ---------- -- -------------------------------------------------- -- --------------- -- -
在这个例子中,使用 fetchPosts
方法的 dispatch
函数来执行异步操作。通过此操作,我们将获取一个包含 Reddit 帖子数据的 JSON 对象。一旦操作成功,然后我们使用 dispatch
来触发异步操作的回调函数。这个方法允许在异步操作完成后再次回调执行。
如何处理大量数据或缓存数据
在处理大量数据或缓存数据时,Redux 中的 Immutable.js 库可以为我们提供帮助。Immutable.js 包含可持续的数据结构,它们需要使用不可变的 API 进行管理。这极大地优化了整个应用程序的性能,缓存和数据更新。Immutable.js 可以在 Redux 中与普通的 JavaScript 对象和数组相结合使用,并且对于 JavaScript 代码来说,只是添加了一些新的操作符。
例如,使用 Immutable.js 可以轻松处理 Store 内的大量数据,而无需考虑进行深度比较的成本。
------ --------- ---- ------------ ----- ------- - --------------- ---- ----- ---
在这个例子中,我们实例化了一个新的 Immutable.Map
对象。这是一个更“透明”的对象,并且稍后可以更高效地转换成相应的 JavaScript 对象。
如何区分容器组件和展示组件
在 Redux 和 React 中,容器组件和展示组件是两个不同的概念。展示组件被设计用于渲染 UI,而容器组件是连接 Store 和展示组件的中间层。容器组件可以将 State 和 Dispatch(Action 声明)传递给展示组件,从而获得对 Store 中的状态和其他操作的更多控制。
例如,在下面的代码片段中,App.js 是一个展示组件,该组件已经连接到 Store,并从 Store 中接收到 Todos 列表。由于 addTodo()
方法在 Store 中声明,因此还需要将该方法绑定到 UI 动作。
------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - ------- - ---- ------------ ----- --- ------- --------- - ------------------ - ------------- ------------------ - ------------------------------ - --------------- - ----------------------------------------------- ---------------- - --- - -------- - ------ - ----- ------ --------- -- ----------- - ------ -- ------- -------------------------------- ------------- ---- -------------------------- -- - --- ------------------------------ --- ----- ------ -- - - ----- --------------- - ----- -- -- ------ ----------- --- ------ ------- ------------------------------
在这个例子中,使用 connect()
方法将 Store 中的状态传递给容器组件。在 handleAddTodo()
方法中,我们调用 addTodo()
函数,并将该方法绑定到 UI 操作中。由于 Store 中的功能是独立的,因此我们可以定义其在 Store 中的行为,并且我们可以在 UI 操作中重用这些功能。
总结
Redux 是 React 技术栈中必不可少的一部分,特别是在处理大量数据或缓存数据时。本文中,我们详细介绍了 Redux 的工作原理,以及解决 Redux 中常见问题的解决方案。如果您正在尝试使用 Redux 构建应用程序,您现在应该了解 Redux 的工作原理,并且知道如何解决其中的常见问题。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/653f0e6f7d4982a6eb88e61e