问题描述
当前行为
-尝试使用 react-native-offline redux-thunk redux-persist 创建一个可行的解决方案
- 在运行应用程序时获取 undefined is not an object (evaluating 'state.network.isConnected')
。
app.js
import React from "react";
import { Provider } from "react-redux";
import configureStore from "@store/configure-store.js";
import { PersistGate } from "redux-persist/es/integration/react";
import { ReduxNetworkProvider } from 'react-native-offline';
import Router from "@appComponents/router.js";
const { persistor,store } = configureStore;
export default App = props => (
<Provider store={store}>
<PersistGate persistor={persistor}>
<ReduxNetworkProvider>
<Router />
</ReduxNetworkProvider>
</PersistGate>
</Provider>
);
app.js
import { createStore,applyMiddleware } from "redux";
import { persistStore,persistReducer } from "redux-persist";
import AsyncStorage from "@react-native-async-storage/async-storage";
import ReduxThunk from "redux-thunk";
import ReduxLogger from "redux-logger";
import hardSet from "redux-persist/lib/stateReconciler/hardSet";
import rootReducer from "@store/store";
import { createNetworkMiddleware } from "react-native-offline";
import { createTransform } from 'redux-persist';
import { user } from "@constants/action-types";
const { loginSuccess } = user;
const networkTransform = createTransform(
(inboundState,key) => {
const actionQueue = [];
inboundState.actionQueue.forEach(action => {
if (typeof action === 'function') {
actionQueue.push({
function: action.Meta.name,args: action.Meta.args,});
} else if (typeof action === 'object') {
actionQueue.push(action);
}
});
return {
...inboundState,actionQueue,};
},(outboundState,key) => {
const actionQueue = [];
outboundState.actionQueue.forEach(action => {
if (action.function) {
const actionFunction = actions[action.function];
actionQueue.push(actionFunction(...action.args));
} else {
actionQueue.push(action);
}
});
return { ...outboundState,actionQueue };
},{ whitelist: ['network'] },);
const persistConfig = {
key: 'root',storage: AsyncStorage,stateReconciler: hardSet,whitelist: ["app","user"],transforms: [networkTransform],};
const networkMiddleware = createNetworkMiddleware({
regexActionType: /^OTHER/,actionTypes: [loginSuccess],queueReleaseThrottle: 200
});
const persistedReducer = persistReducer(persistConfig,rootReducer);
const isDevMode = Boolean(__DEV__);
const middleWares = isDevMode ? [networkMiddleware,ReduxThunk,ReduxLogger] : [networkMiddleware,ReduxThunk];
const store = createStore(persistedReducer,{},applyMiddleware(...middleWares));
const persistor = persistStore(store);
export default { store,persistor };
pakage.json
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.5","@react-native-community/masked-view": "^0.1.11","@react-native-community/netinfo": "^5.9.10","@react-navigation/native": "^5.9.4","@react-navigation/stack": "^5.14.5","axios": "^0.21.1","react": "17.0.1","react-native": "0.64.2","react-native-gesture-handler": "^1.10.3","react-native-offline": "^5.8.0","react-native-reanimated": "^2.2.0","react-native-safe-area-context": "^3.2.0","react-native-screens": "^3.3.0","react-redux": "^7.2.4","redux": "^4.1.0","redux-persist": "^6.0.0","redux-thunk": "^2.3.0"
}
action.js
const UserActions = {
loginTap: tapped => {
function thunk(dispatch,getState) {
const user = { email: 'bsuri555@gmail.com',password: 'Rohtash*1' };
dispatch({ type: loginStart })
if (!tapped) {
axios.post(userLogin,user).then(function (response) {
console.log("response",response.data);
dispatch({ type: loginSuccess,payload: tapped })
}).catch(function (error) {
dispatch({ type: loginFailure,payload: error })
})
}
else {
dispatch({ type: loginTapped,payload: tapped })
}
}
thunk.interceptInOffline = true;
return thunk;
}
};
预期行为
如何复制
- 配置完所有包后,link 无法启动应用
环境
软件 | 版本 |
---|---|
react-native-offline | "^5.8.0" |
反应原生 | "0.64.2" |
节点 | v15.9.0 |
npm 或 yarn | npm 7.5.3 |
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)