redux-sync-promise 是一个能够在 Redux 应用中帮助我们管理异步 action 的 npm 包。它提供了一种简单的方式,使得我们可以在 action 中返回一个 Promise,然后等待该 Promise 成功后再更新 state。本文主要介绍 redux-sync-promise 的基本使用方法及其实现原理。
安装
redux-sync-promise 可以通过 npm 安装:
--- ------- ------------------
或者通过 yarn 安装:
---- --- ------------------
基本使用
首先,在 Redux 的 createStore 中引入 redux-sync-promise:
------ - ----------- - ---- -------- ------ --------------------- ---- --------------------- ----- ----- - ------------ -------- --------------------------------------- --
然后,在生成 action 的函数中返回一个 Promise,当该 Promise 完成时,我们使用 redux-sync-promise 的标准 action 来保存结果:
------ ----- --------- - --- -- ----- ---------- -- - ----- ------ - ----- ----------- ----- ---- - ----- -------------- ---------- ----- ------------- -------- ---------------------- --- --
上述代码中,我们使用 async/await 来请求数据,等待结果后,我们将结果封装在一个 Promise 中,并用该 Promise 对象创建一个标准 action 返回。这个 action 对象中的 promise 属性是 redux-sync-promise 定义的一个关键字,用于指定 action 执行完后需要执行的 Promise 对象。
最后,我们需要在 reducer 中根据这个 action 更新我们的 state:
----- ------- - ------- ------- -- - ------ ------------- - ---- ------------- ------ - --------- ----- --------------- -- -------- ------ ------ - --
上述代码中,我们将 action.promise 作为数据存储到 state 中。由于 action 已经由 redux-sync-promise 处理,action.promise 返回的实际上是完成数据的 Promise 对象。
实现原理
redux-sync-promise 的本质是一个 middleware,所以它被放在 Redux createStore 函数中的 applyMiddleware 方法中。通过这个 middleware,我们可以使用 action.promise 这个关键字来指定 action 后需要执行的 Promise 对象。
当我们 dispatch 一个 action 时,redux-sync-promise 会判断该 action 中是否包含关键字 promise。如果包含,它会等待该 Promise 对象执行完成,然后再将结果保存到 state 中。
同时,redux-sync-promise 会创建一个新的代理 action,将原始的 action 中的 promise 属性移除。这个代理 action 的类型形式为 ${ACTION_TYPE}_COMPLETED
,并将其返回给 reducer 进行处理。在 reducer 中,我们可以通过解析 action 类型后的后缀,判断当前 redux-sync-promise 是否返回了一个代理 action,然后再将 action.promise 中的结果存储到 state 中。
总结
redux-sync-promise 是一个非常有用且易于使用的 npm 包,它能够让我们更好地管理 Redux 中的异步 action。本文介绍了 redux-sync-promise 的基本使用方法及其实现原理,希望对大家有所帮助。附上完整示例代码:
------ - ------------ --------------- - ---- -------- ------ --------------------- ---- --------------------- ----- ----- - ------------ -------- --------------------------------------- -- ------ ----- --------- - --- -- ----- ---------- -- - ----- ------ - ----- ----------- ----- ---- - ----- -------------- ---------- ----- ------------- -------- ---------------------- --- -- ----- ------- - ------- ------- -- - ----- ---- - -------------------------- ------ ------ - ---- ------------- ------ - --------- ----- --------------- -- -------- ------ ------ - --
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6006700de361a36e0bce8ca1