Only part of the store is persisted.

[ChrisJVoss]

I am using redux-persist and react-native's AsyncStorage but only one part of my store is being persisted. My "auth" part of state gets persisted without any problem but all other parts of my state (specifically the "catalog" portion) do not persist.

Here are my combined reducers:

import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
import PriceReducers from "./PriceReducers";
import SearchReducers from "./SearchReducers";
import SetPriceReducers from "./SetPriceReducers";
import GetCatalogReducers from "./GetCatalogReducers";

export default combineReducers({
  auth: AuthReducer,
  prices: PriceReducers,
  search: SearchReducers,
  setPrice: SetPriceReducers,
  catalog: GetCatalogReducers
});

Here is how I've set up my persistor and persistReducer:

import { createStore, applyMiddleware } from "redux";
import { AsyncStorage } from "react-native";
import { persistStore, persistReducer } from "redux-persist";
import ReduxThunk from "redux-thunk";
import reducers from "./reducers";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2,
  blacklist: ["prices"]
};

const persistentReducer = persistReducer(persistConfig, reducers);

export const store = createStore(
  persistentReducer,
  {},
  applyMiddleware(ReduxThunk)
);
export const persistor = persistStore(store);

Here I wrap my components with PersistGate:

import React, { Component } from "react";
import { SafeAreaView } from "react-native";
import { Provider } from "react-redux";
import { store, persistor } from "./src/store";
import Router from "./src/Router";
import { PersistGate } from "redux-persist/lib/integration/react";
import { Loading } from "./src/components/common";

class App extends Component {
  componentWillMount() {
    console.log(persistor);
  }
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Provider store={store}>
          <PersistGate loading={<Loading />} persistor={persistor}>
            <Router />
          </PersistGate>
        </Provider>
      </SafeAreaView>
    );
  }
}

const styles = {
  safeArea: {
    flex: 1,
    backgroundColor: "#ddd"
  }
};

export default App;

And here is my reducer for the "catalog" portion of state.

import { GET_CATALOG } from "../actions/types";

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_CATALOG:
      return { ...state, ...action.payload };
    default:
      return { ...state };
  }
};

If anyone could provide insight or point me in the right direction as to why my "catalog" might not be getting persisted I would appreciate that very much!

[ManuelJF]

@ChrisJVoss you're prices reducer persisted?

[ChrisJVoss]

@ManuelJF No, I blacklisted prices. My understanding is that 'auth', 'search', 'setPrice', and 'catalog' should all be persisted. However, only 'auth' is persisted.

[tommyalvarez]

@ChrisJVoss shouldn't you be using persistCombineReducers instead of persistReducers?

[ChrisJVoss]

@tommyalvarez persistCombineReducers isn't listed on the API guide, but I'll give it a shot. https://github.com/rt2zz/redux-persist/blob/master/docs/api.md

I'm also passing reducers to persistReducers() which is the result of calling redux's combineReducers() on all my reducers.

[rezasazesh]

Any solution to this?