0

I am making an app in react-native for android using redux and using Wix's react-native-navigation to navigate between screens. I am storing a list of all data fetched from API into the redux store. I am using redux-persist to display list present in the store if the user is offline. In the app after clicking on any item, it goes to a new page and calls new API with selected item id like fetch(constants.BaseURL + /api/detail/${id}. Now I want to display this data also in offline mode how can I do that?

My configureStore.js

import { createStore, combineReducers, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage';

import masjids from "./reducers/productReducer";
import { root } from "./reducers/rootReducer";


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

const reducers = {
  root,
  masjids
}

const reducer = persistCombineReducers(config, reducers)

let composeEnhancers = compose;

if (__DEV__) {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const configureStore = () => {
  return createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
};

export default configureStore;

I was wondering if anyone would like to share their solution. Thanks in advance.

productReducer.js

import * as types from "../actions/masjidList/ActionTypes";

  const initialState = {
    items: [],
  };

  export default function masjidListReducer(
    state = initialState,
    action
  ) {
    switch (action.type) {
      case types.FETCH_MASJIDS_SUCCESS:
        return {
          ...state,
          items: action.payload.masjids
        };
      default:
        return state;
    }
  }

rootReducer.js

import * as types from '../actions/login/ActionTypes';
import Immutable from 'seamless-immutable';

const initialState = Immutable({
  root: undefined, // 'login' / 'after-login' / 'register'
});

//root reducer
export function root(state = initialState, action = {}) {

  switch (action.type) {

    case types.ROOT_CHANGED:
    return {...state,root:action.root}

    default:
      return state;
  }
}
Ahtesham Shah
  • 243
  • 2
  • 7
  • 31

1 Answers1

0

You must pass all of your reducers to the store. The ones that are passed will be persisted. Make sure you store the response after fetching. I suggest you make separate reducer file and use combineReducers call to get a singleton object.

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';

//import all the reducers
import reducers from '../reducers';

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

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = createStore(
  persistedReducer,
  {},
  applyMiddleware(ReduxThunk)
);
export const persistor = persistStore(store);
Prakash Bokati
  • 191
  • 1
  • 11