Persistence does not work React Native

[alexandrebouttier]

Hello, I am having difficulty getting redux persist to work on my React app, persistence does not work when I cut my api nothing is kept in memory, if anyone has an idea

my file configureStore.js :

import { createStore, applyMiddleware } from 'redux';

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'

import thunk from 'redux-thunk';
import rootReducer from './modules/reducer';

const persistConfig = {
  key: 'root',
  storage: storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  const store = createStore(persistedReducer,applyMiddleware(thunk));
  return { store, persistor: persistStore(store) };
};

my file reducer.js :

import { combineReducers } from 'redux';

import vehicules from './vehicules';
import optionsTypes from './optionsTypes';
import sorties from './sorties';
import depenses from './depenses';
import entretiens from './entretiens';
import optionsEntretiens from './optionsEntretiens';
import auth from './auth';

export default combineReducers({
  vehicules,
  sorties,
  entretiens,
  depenses,
  optionsTypes,
  optionsEntretiens,
  auth,
});

An example of one of my modules : "entretiens.js"

import axios from 'axios';
import getEnvVars from '../../environment';

import { findIndex } from 'lodash';

const { API_URL } = getEnvVars();
import { tokenConfig } from './auth';

export const GET_ENTRETIENS_REQUEST = 'GET_ENTRETIENS_REQUEST';
export const GET_ENTRETIENS_SUCCESS = 'GET_ENTRETIENS_SUCCESS';
export const GET_ENTRETIENS_FAIL = 'GET_ENTRETIENS_FAIL';

const initialState = {
  data: null,
  error: null,
  loading: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_ENTRETIENS_REQUEST:
      return {
        ...state,
        data: null,
        loading: true,
      };
    case GET_ENTRETIENS_SUCCESS:
      return {
        ...state,
        data: action.payload,
        loading: false,
      };

    default:
      return state;
  }
}

export const getEntretiens = () => (dispatch, getState) => {
  dispatch({
    type: GET_ENTRETIENS_REQUEST,
    payload: true,
  });
  return axios
    .get(API_URL + `entretiens`, tokenConfig(getState))
    .then((res) => {
      dispatch({
        type: GET_ENTRETIENS_SUCCESS,
        payload: res.data,
      });
      return res;
    })
    .catch((err) => {
      dispatch({
        type: GET_ENTRETIENS_FAIL,
        payload: err,
      });
      return err;
    });
};

my file index.js :

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
import { PersistGate } from 'redux-persist/integration/react'

import Router from './Router'

import './assets/stylesheets/index.scss'
const { persistor, store } = configureStore()

ReactDOM.render(
  <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router />
      </PersistGate>
  </Provider>,
  document.getElementById('root')
)
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in window.navigator) {
  window.onload = () => window.navigator.serviceWorker.register('/service-worker.js')
}

[mayank-budhiraja]

@alexandrebouttier you should use a middleware and export like this -

const persistedReducer = persistReducer(persistConfig, rootReducers);

export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

[alexandrebouttier]

@alexandrebouttier you should use a middleware and export like this -

const persistedReducer = persistReducer(persistConfig, rootReducers);

export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

@mayank-budhiraja Thank you for your reply, I did like this but unfortunately it does not work

import { createStore, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'

import storage from 'redux-persist/lib/storage'
import thunk from 'redux-thunk'
import rootReducer from './modules/reducer'

const persistConfig = {
  key: 'root',
  storage
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = createStore(persistedReducer, applyMiddleware(thunk))
export const persistor = persistStore(store)

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import { persistor, store } from './store/configureStore'
import { PersistGate } from 'redux-persist/integration/react'

import Router from './Router'

import './assets/stylesheets/index.scss'

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in window.navigator) {
  window.onload = () => window.navigator.serviceWorker.register('/service-worker.js')
}

[alexandrebouttier]

@mayank-budhiraja your solution has solved my basic problem, in fact my second problem is that I use firebase, and in fact even offline the promise goes into the then with their offline system, so I lose my data each time, thank you for your solution