networkSaga - pingInterval not working

[pmninh91]

I am having problems using networkSaga. In rootSaga I am executing pingInterval for 30 seconds. When I disconnected, I launched the app, isConnected: false, but when I had the connection again, I waited for 30 seconds but no response, isConnected is still false. How can it turn into true? Can you help me?

rootSaga.js

export default function* rootSaga() {
  yield all(
    [
      ...Object.values(networkSaga({ pingInterval: 30000 })),
      ...Object.values(screenSaga)
    ].map(fork)
  );
}

configureStore.js

export default function configureStore() {
  const middlewares = [];
  middlewares.push(tokenMiddleware);
  const networkMiddleware = createNetworkMiddleware({
    queueReleaseThrottle: 200
  });
  middlewares.push(networkMiddleware);
  const sagaMiddleware = createSagaMiddleware();
  middlewares.push(sagaMiddleware);
  if (process.env.NODE_ENV === "development") {
    middlewares.push(logger);
  }
  const persistedReducer = persistReducer({ key: "root", storage }, rootReducers);
  const enhancer = compose(
    applyAppStateListener(),
    applyMiddleware(...middlewares)
  );
  const store = createStore(persistedReducer, enhancer);
  persistStore(store, null, () => {
    checkInternetConnection().then(isConnected => {
      store.dispatch({
        type: offlineActionTypes.CONNECTION_CHANGE,
        payload: isConnected
      });
    });
  });
  sagaMiddleware.run(allSaga);
  return store;
}

"react": "16.8.6", "react-native": "0.59.3", "react-native-offline": "^4.3.1", "redux-saga": "^1.0.2",

[rgommezz]

Hi @pmninh91, your saga configuration looks weird. Could you try first to simply fork each one of the effects explicitly inside the yield all instead of spreading and mapping?

export default function* rootSaga() {
  yield all([
    fork(screenSaga),
    fork(networkSaga, { pingInterval: 30000 }),
  ]);
}

[brayanL]

I had the same issue, the problem is the saga is no executed with you configuration above, you should to do some like this:

import { networkSaga } from 'react-native-offline';
import { loginSagas } from '../apps/login/sagas';

function* rootSaga() {
  yield all(
      [...Object.values(loginSagas),
        ...Object.values([networkSaga])
      ].map(fork),
  );
}

[pmninh91]

Thank @rgommezz , @brayanL. I will try to check again :)

[Faolain]

I have the same issue just with a slightly different setup

// rootSaga.js
export default function* root() {
  yield all([
    fork(networkSaga, { pingInterval: 1000 }),
    // Push Notification
    takeEvery(RECEIVE_PUSH_NOTIFICATION_REQUESTED, receivePushNotification),
    // Profile Screen
    takeLatest(EDITPROFILE_SUBMIT_REQUESTED, editProfile),
    takeEvery(TOGGLE_COLOR, toggleColor),
     ....
  ]);
}

// store.js
import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import createSagaMiddleware from 'redux-saga';
import {
  createNetworkMiddleware,
  offlineActionTypes,
  checkInternetConnection,
} from 'react-native-offline';
import rootReducer from './rootReducer';
import rootSaga from '../Sagas';

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['colorReducer', 'numberReducer'],
};

// create the saga middleware
const sagaMiddleware = createSagaMiddleware();
const networkMiddleware = createNetworkMiddleware({
  queueReleaseThrottle: 200,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default function configureStore() {
  const store = createStore(
    persistedReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), // eslint-disable-line
    applyMiddleware(networkMiddleware, sagaMiddleware),
  );

  const persistor = persistStore(store, null, () => {
    // After rehydration completes, we detect initial connection
    checkInternetConnection().then(isConnected => {
      store.dispatch({
        type: offlineActionTypes.CONNECTION_CHANGE,
        payload: isConnected,
      });
    });
  });
  sagaMiddleware.run(rootSaga);

  return { store, persistor };
}

The saga does not seem to trigger at all upon changing my network however what does work is wrapping my main component with <ReduxNetworkProvider> </ReduxNetworkProvider>. I'm assuming since<ReduxNetworkProvider> works then it must be a problem with my saga configuration? Any help would be greatly appreciated