介绍
redux-middleware-react-native-netinfo 是一个 React Native 应用程序中使用 NetInfo API 进行网络连接状态管理的 Redux 中间件。这个包的目的是防止您的应用在没有网络连接的情况下发送api请求。从而导致应用程序崩溃或卡死。
安装
首先，您需要在项目中安装 redux，然后可以通过 npm 安装 redux-middleware-react-native-netinfo：
npm install redux-middleware-react-native-netinfo --save
使用
配置
为了正确使用此中间件进行 redux store setup，您需要将 netInfo config 对象传递到 createStore 函数。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ---------------------------------------- ----- ------ - - ----------------------------- ----- --------------------------------- ------ --------------------------------- ------ --------------------------- ------------------------------------------- ------------------------------------ ----------------------- ------- ------------------------ -- -- - ------ ---- -- ---------------------------- ---- -- ----- ---------- - ------------------------------------------- ----- ----- - -------------------- ------------
Action Creator
如果要像使用其他 Redux middleware 一样处理 action，则需要使用 action creator。redux-middleware-react-native-netinfo 提供了两个 action creator：
dispatchOnline()dispatchOffline()
import { dispatchOnline, dispatchOffline } from 'redux-middleware-react-native-netinfo';
dispatchOnline();
dispatchOffline();Reducer
下面是一个简单的 reducer，它通过监听 NETINFO_ONLINE 和 NETINFO_OFFLINE action 更新 state。
-- -------------------- ---- -------
----- ------------ - -
------------ -----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------------
------ -
------------ ----
--
---- ------------------
------ -
------------ -----
--
--------
------ ------
-
-使用示例
以下示例代码演示了如何在 React Native 应用程序中使用 redux-middleware-react-native-netinfo。
-- -------------------- ---- -------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- --------------
------ - --------------- --------------- - ---- ----------------------------------------
----- --- ------- --------------- -
------------------- -
------------------------------ -- -
-- ------------------- -
----------------------------
- ---- -
-----------------------------
-
---
-
-------- -
------ -
------
----------------------------- - -------- - -----------------
-------
--
-
-
----- --------------- - ----- -- --
------------ -----------------
---
----- ------------------ - -
---------------
---------------
--
------ ------- ------------------------ -------------------------配置参数
以下是可用于配置 NetInfo 的对象的参数，以及它们的默认值。
-- -------------------- ---- ------- - ----------------------------- ----- --------------------------------- ------ --------------------------------- ------ --------------------------- ------------------------------------------- ------------------------------------ ----------------------- ------- ------------------------ -- -- - ------ ---- -- ---------------------------- ---- -
reachabilityRequestTimeoutMs
- 类型：number
- 默认值：5000
- 描述：请求超时时间（ms）
reachabilityLongPollingTimeoutMs
- 类型：number
- 默认值：20000
- 描述：长轮询超时时间（ms）
reachabilityUnavailableTimeoutMs
- 类型：number
- 默认值：60000
- 描述：不可用状态的超时时间（ms）
reachabilityCheckAddresses
- 类型：Array<string>
- 默认值：['http://clients3.google.com/generate_204', 'http://www.msftncsi.com/ncsi.txt']
- 描述：用于检查网络连接状态的 url 数组
reachabilityHttpMethod
- 类型：string
- 默认值：'HEAD'
- 描述：http方法用于检查url可用性
reachabilityOnLineCheck
- 类型：Function
- 默认值：() => { return true }
- 描述：用于检查网络连接状态的自定义方法
reachabilityUrlRetryDelayMs
- 类型：number
- 默认值：5000
- 描述：在重新检查 url 之前的延迟时间（ms）
结论
redux-middleware-react-native-netinfo 可以帮助您在 React Native 应用程序中管理网络连接状态，防止应用程序在没有网络连接的情况下失败。通过在 Redux Store 中集成此中间件可以实现更流畅的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b4d