Data storage and memory management

In this tutorial, you will learn how to persist your custom API response, by allowing the app to cache your data in the Redux store and make it reappear after closing and reopening the app without the need to fetch data from the API.

In reference to the example mentioned in the Fetching Data from APIs tutorial, it is worth mentioning that the app uses redux-persist for data persisting. Hence, if you want to persist your custom API response, you can simply add a custom reducer to the whitelist array in the app’s persistor config by adding a persistor config changer function via the reduxApi.addPersistorConfigChanger.

// index.js


import React from "react";
import {NativeModules} from "react-native";
import MyCustomScreen from "./MyCustomScreen";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
    externalCodeSetup.navigationApi.addNavigationRoute(
"customScreen",
"MyCustomScreen",
MyCustomScreen,
"noAuth" // "Auth" | "noAuth" | "Main" | "All"
    );


    externalCodeSetup.reduxApi.addReducer(
     "customApiResponseReducer",
     (state = {data: {}}, action) => {
       if (action.type === "CUSTOM_ACTION") {
         return {...state, data: action.payload};
       } else {
         return state;
       }
     }
    );


    externalCodeSetup.reduxApi.addPersistorConfigChanger(
      persistorConfig => ({
         ...persistorConfig,
         whitelist: [
           ...persistorConfig.whitelist, 
          "customApiResponseReducer"
        ]
      })
    );
};

Expand full source code

Note: The app’s default behaviour is to persist data. If you wish to disable this behaviour, you can pass false to reduxApi.setDataPersistingEnabled, i.e. reduxApi.setDataPersistingEnabled(false).

App Development

Questions?