1

当前行为

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

预期行为

  • 使其与 redux-peersist 一起工作，然后将工作解决方案合并到 Release 构建。

如何重现

  • 配置完所有包和以下链接后无法启动应用程序

环境

软件 版本
离线反应本机 "^5.8.0"
反应式 “0.64.2”
节点 v15.9.0
npm 或纱线 npm 7.5.3
4

1 回答 1

0

state.network.isConnected存在于您的 redux 商店中

您需要做的就是创建一个 getter 函数，该函数将返回它的值。

你可以参考这个例子来了解如何去做。

于 2021-10-31T18:22:38.367 回答