Блог

Текущее Поведение

-Попытка создать рабочее решение с помощью react-native-автономное редактирование-повторное редактирование-сохранение-Получение 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, а затем объединить рабочее решение со сборкой выпуска.

Как размножаться

• После настройки всех пакетов и перехода по ссылке не удается запустить приложение

Окружающая среда

state.network.isConnected существует ли в вашем магазине redux

Все, что вам нужно сделать, это создать функцию получения, которая вернет ее значение.

Вы можете обратиться к этому примеру, чтобы получить хорошее представление о том, как это сделать.