可能你会遇到过这样的情况,组件变得越来越复杂,层级嵌套越来越深,组件间的数据流也需要能够快速、简便地进行相应的增删改查。同时,全局共享的状态也需要在组件中进行反应。Redux 应运而生,它通过可预测的状态管理,为你的 React 应用提供了更好的数据流方案。
在开始入门 Redux 前,我们先来回顾一些基础知识:Redux 是什么?Redux 提供了什么?Redux 应该什么样的环境下使用?
Redux 是什么?
Redux 是一个状态管理库,它可以让我们更好地组织应用的状态,用于规划 React 应用的数据流。Redux 通过将应用的状态(也就是数据)与 UI 界面进行分离,从而确保了这些状态在不同组件之间的传递与同步,使得我们的应用变得更加可预测、可控。
Redux 提供了什么?
Redux 的核心就是 Store。Redux 应用中,Store 是维护应用全局状态的一块独立存储空间。但是,Store 状态是不可变的,只能通过纯函数的形式通过 Action 进行更新,保证了我们的应用状态更加可控。用一个简单的图来讲就是:
Redux 应该在什么样的环境下使用?
Redux 适用于大型应用,特别是当应用不断变得复杂时。无论你是在使用 React, Vue, Angular 或其他框架,Redux 都能够在你的应用中发挥作用。
好了,我们已经了解了 Redux 是什么以及它提供了什么,接下来,我们开始入门 Redux 的关键要素。
Redux 的三个关键要素
Redux 的三个核心要素是:Action、Reducer 和 Store。为了让你更好地理解它们,我们分别来介绍一下。
1. Action
Action 是一个纯 JavaScript 对象,用来描述发生的事件。它是可序列化的,也就是说可以被记录、传输、储存。每一个 Action 都包含了一个 type 属性,用于描述发生的事件类型。例如:
- ----- ----------- -- ------ ------------- -
在实际开发过程中,我们还需要传递一些参数,如下所示:
- ----- ----------- -------- - ----- --- ------- ---------- ----- - -
其中 payload 属性是我们需要传递的数据。我们通常会提取出 Action 的创建函数,这样便于我们在代码中的使用。例如:
-------- ------- ------ - ------ - ----- ----------- -------- - ----- ----- ---------- ----- - - -
2. Reducer
Reducer 是纯函数,它在 Redux 中担任着处理状态的工作。Reducer 接收两个参数,第一个参数是当前的 state,第二个参数是描述要进行的修改的 Action,它会根据这个 Action 来返回一个新的 state。需要注意的是,Reducer 是一个纯函数,不改变原有的状态,而是返回一个新的状态。例如:
-------- ------- ------ - -- ------- - ------ ------------- - ---- ------------ ------ ----- - - ---- ------------ ------ ----- - - -------- ------ ----- - -
3. Store
Store 是将 Action 和 Reducer 连接的桥梁,它存储了应用的状态,并且提供了通用的 API。在 Redux 中只有一个 Store,通过 createStore() 方法创建。
------ - ----------- - ---- ------- ------ ------- ---- -------------------- ----- ----- - --------------------
异步 Action 的使用
当我们的应用中需要进行异步操作时,我们需要使用 redux-thunk 中间件。
我们需要在 store 中应用这个中间件,然后创建一个可异步的 action,如下所示:
------ - ------------ --------------- - ---- ------- ------ --------------- ---- ------------- ------ ------- ---- ------------ ----- ----- - ------------ -------- ---------------- --------------- -- -------- ------ - - -- -- ------ --- ------ -------- ---------- ----------- - -- -- -------- ----- ----- --- ------ - ------ -------- -- - --------------------------------- ------ --------------------------------------------------- -------------- -- ---------------- ---------- -- -------------------------------- ------- - -
使用 React 和 Redux
使用 React 和 Redux,我们需要订阅状态的变化。在组件整个生命周期中,我们都需要订阅 Redux 的 store 状态的变化。
具体的实现如下所示:
------ ------ - --------- - ---- ------- ------ - ------- - ---- ------------- ----- ------- ------- --------- - ------ -- - ----- - ------ -------- - - ---------- ------ - ----- -------------- --- ------ --- ------- ----------- -- ---------- ----- ----------- -------------- ------- ----------- -- ---------- ----- ----------- -------------- ------ - - - -------- --------------- ------- - ------ - ------ ----- - - -- -- ----- --- ----- ----- -- ------ ------- ---------------------------------
这样,我们就完成了 React 和 Redux 的连接。
总结
Redux 是一个状态管理的库,它将应用的状态与 UI 界面进行了分离,进行了更好的组织。Redux 的核心要素是:Action、Reducer 和 Store。使用 Redux 中间件的异步 Action 可以不阻塞应用线程。 通过 react-redux 库,我们可以将 React 和 Redux 连接起来。
示例代码可以在 GitHub 上查看到。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6539bd247d4982a6eb336939