配置 react-native-offline 时得到 undefined is not an object 'state.network.isConnected 使用 redux-persist 和

Posted 2023-02-19

技术标签:

【中文标题】配置 react-native-offline 时得到 undefined is not an object \'state.network.isConnected 使用 redux-persist 和 redux-thunk【英文标题】：while configuring react-native-offline got undefined is not an object 'state.network.isConnected while using it with redux-persist and redux-thunk配置 react-native-offline 时得到 undefined is not an object 'state.network.isConnected 使用 redux-persist 和 redux-thunk 【发布时间】：2021-08-30 03:50:50 【问题描述】：

当前行为

-尝试使用 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;
    
;