Redux 是一个流行的 JavaScript 应用程序状态管理库,它被广泛应用于前端领域。它提供通用的状态容器,可以让我们轻松管理应用程序的状态。在实际开发中,异步操作是非常常见的,例如从服务器获取数据、异步调用 API 等。在 Redux 中如何处理异步操作?
Redux 中的异步处理
Redux的设计理念是所有的state变更皆由纯函数reducer处理,因此Redux并没有内置异步处理能力,它只能通过 middleware 来处理异步操作。Redux官方提供了一个官方中间件——redux-thunk
,redux-saga
等等,其中redux-thunk
是其中最简单的一个,同时它也大多数情况下能够满足我们的需求。
Redux Thunk
Thunk有好几种定义,一种最流行、最约定俗成的是它是一个能够延迟计算的表达式。具体而言,它是一个函数,用来封装一个计算任务,可以在需要时再进行计算。Redux Thunk利用到了这个特性,它提供了一种让action创建器真正做点异步操作的方式——在action创建器中返回一个函数,而不是普通action对象。
安装
使用npm安装redux-thunk:
npm install --save redux-thunk
使用
在使用 createStore
创建 Redux Store 的时候,通过 applyMiddleware 把 redux-thunk 加入到 Middleware 中。
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(thunk) );
示例
假如我们要实现一个异步增加计数器的功能,我们需要做如下的步骤:
- 定义增加计数器的 action 类型和函数
-- -------------------- ---- ------- -- -- ------------ ------ ----- --------- - ------------ -- -- ---------- ------ - --------- - ---- -------------- ------ ----- -------- - -- -- -- ----- ---------- ---
- 创建 action 创建函数
在 action 创建函数中进行异步操作,最终通过 dispatch 分发 action
-- -------------------- ---- ------- -- -- ----------------- ------ - -------- - ---- ------------ ------ ----- ------------- - -- -- - ------ -------- -- - ------------- -- - --------------------- -- ------ -- --
- 整合 action
-- -------------------- ---- ------- -- ------------ ------ - --------- - ---- --------------- ----- ------------ - - ------ -- -- ----- ------- - ------ - ------------- ------- -- - ------ ------------- - ---- ---------- ------ - ------ ----------- - -- -- -------- ------ ------ - -- ------ ------- --------
- 在组件中调用 action 创建函数
在组件中,我们通过 React-redux 提供的 connect 函数连接 Redux Store,从而可以在 props 上获取到 dispatch。然后再通过 dispatch 触发 action。
-- -------------------- ---- ------- -- -- ------ ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - ------------- - ---- ------------------------- ----- --- - -- ------ ------------- -- -- - ----- ---------- ------------ ------- ----------------------------------------- ------ -- ----- --------------- - ----- -- -- ------ ------------ --- ------ ------- ------------------------ - ------------- --------
上面的代码中,当点击按钮时,我们调用 addCountAsync
方法,该方法返回了一个函数,这个函数最终需要通过 dispatch 触发 ADD_COUNT action。
最后,我们的 app 功能正常,当点击按钮一秒后,计数器会自动 +1。
总结
本文介绍了 Redux 中的异步等待和处理方法,重点介绍了 redux-thunk
中间件的原理和使用方法。Redux 中的异步操作需要用 middleware 来处理,在中间件内写异步操作,最终通过 actionCreator 返回普通对象 action 或者函数来实现异步操作。redux-thunk
让我们可以非常方便地实现异步操作,它灵活易用、应用场景广,对于大多数前端开发者而言,它是一个不错的选择。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/654af41b7d4982a6eb4e8f38