简介
随着 React 的流行,越来越多的开发者开始使用 Redux 来进行状态管理。为了方便使用,社区中涌现了不少算是一站式解决方案的 Redux 中间件。其中一个比较受欢迎的是 react-redux-fetch-if-necessary,它可以让你更优雅地发起网络请求。
安装
使用 npm 安装 react-redux-fetch-if-necessary:
--- ------- ------ ------------------------------
使用
在 Redux 的 store 中配置中间件:
------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ------ ------- ------------ ------------ ---------------------- ---------------- --
我们推荐将 react-redux-fetch-if-necessary 和 Redux 的 thunk 中间件同时使用,这样可以方便地处理异步 action。
之后,就可以在 action 中发起网络请求了:
-- --------- ------ - ------------- - ---- --------------------------------- ------ ----- ----------- - -------------- ------ -------- ------------ - ------ -------- -- - ----- --- - -------------------------------- ----------------------------------- - ---- ------- ------ ---------- ---- -- - ---------- ----- ------------ -------- - ---- - --- -- -------- ----- -- - ---------- ----- ------------ -------- - ----- - --- - ---- -- -
fetchIfNeeded 接收两个参数:fetchType 和 options。fetchType 表示本次请求的类型,options 则包含了所有请求的相关设置。
在本例中,我们通过 url 将请求地址传递给了 options,assign 方法中的 onSuccess 和 onError 分别表示请求成功和失败的回调函数。我们在这里 dispatch 了 FETCH_USERS 类型的 action,将数据存储到 Redux store 中。
最后,我们需要回到 components 中,将 state 映射到 props 中:
-- ------------ ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - ---------- - ---- ----------- ----- -------- ------- --------- - ------------------- - ------------------------ - -------- - ----- - ------ ------- - - ----------- -- --------- - ------ ------------------ - ------ - ---- --------------- -- - --- ------------------------------ --- ----- -- - - ----- --------------- - ----- -- -- ------ ----------------- -------- ------------------- --- ------ ------- ------------------------ - ---------- -------------
当组件渲染时,我们触发了 fetchUsers 函数,开始发送网络请求。当请求数据返回后,我们将其存储在 Redux store 中,接着将 users 从 store 中映射到组件上并渲染出来。
案例
我们通过一个完整的案例来看看 react-redux-fetch-if-necessary 的所有应用。你可以将以下代码复制到你的项目中并运行。
-- -------- ------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ------ ------- ------------ ------------ ---------------------- ---------------- --
-- --------- ------ - ------------- - ---- --------------------------------- ------ ----- ----------- - -------------- ------ -------- ------------ - ------ -------- -- - ----- --- - --------------------------------------------- ----------------------------------- - ---- ------- ------ ---------- ---- -- - ---------- ----- ------------ -------- - ---- - --- -- -------- ----- -- - ---------- ----- ------------ -------- - ----- - --- - ---- -- -
-- ---------- ------ - ----------- - ---- ----------- ----- ------------ - - ------ - ----- --- -------- ----- - -- ------ ------- ------ - ------------- ------- -- - ------ ------------- - ---- ------------ ------ - --------- ------ - ----- -------------------- -------- ----- - -- -------- ------ ------ - --
-- ------------ ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - ---------- - ---- ----------- ----- -------- ------- --------- - ------------------- - ------------------------ - -------- - ----- - ------ ------- - - ----------- -- --------- - ------ ------------------ - ------ - ---- --------------- -- - --- ------------------------------ --- ----- -- - - ----- --------------- - ----- -- -- ------ ----------------- -------- ------------------- --- ------ ------- ------------------------ - ---------- -------------
最后,我们将 UserList 渲染到页面上:
-- -------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ ----- ---- ---------- ------ -------- ---- -------------- ---------------- --------- -------------- --------- -- ------------ ------------------------------- --
至此,你已经完成了网络请求的开发。
总结
react-redux-fetch-if-necessary 让 Redux 的状态管理变得更加丝滑。使用它的过程中,你将更加专注于数据的处理而不是网络请求的细节。我们的建议是:在使用它时,一定要充分了解如何设置网络请求响应和错误处理的回调函数。当你熟悉了这一点后,你就可以轻松地进行数据存储、状态管理和网络请求了。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562d581e8991b448e0243