Search code examples
javascriptandroidreact-nativereduxredux-offline

rn redux-offline delete request data/cache


just got stuck in configuring react-native offline requests. I want to use it to send data and image files as base64 array with it, well i got it working but after that caches grows constantly day 140mb/4h while testing in real-device, that suppose not the way it should work. What i am missing in general?.

store configuration with custom request(converting images to base64)

    offlineConfig2 = {
  ...offlineConfig,
  persistCallback: () => {
    console.log('Rehydratation complete');
  },
  persistOptions: {
    key: 'primary',
    storage:AsyncStorage
  },
  rehydrate: true,
  // @overwrite effect

  effect: (effect, action) => {
    console.log(`Executing effect for ${action.type}:`, effect);
      photoArr = [];
      if (effect.photo)
      photoArr = effect.photo;
      promises = photoArr.map(function(photo){
        return base64 = RNFetchBlob.fs.readFile(photo.key, 'base64')
                    .then((data) => {
                    return data
                    }).catch(err => console.log(err));
      });

      return new Promise(
        function (resolve, reject) {
        Promise.all(promises).then(function(base64Photo) {
        body = effect.body;
        if(Array.isArray(base64Photo) && base64Photo.length > 0) {
          body = Object.assign({photoArr: base64Photo}, body);
        } 
        fetch(effect.url, { // eslint-disable-line
          method: effect.method,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer' + effect.token
          },
          body: JSON.stringify(body),
        })
        .then(res => {
          console.log('response', res);
          resolve('ok');
          return res.ok
            ? res.json()
            : Promise.reject(res.text().then(msg => new Error(msg)));
        })
        .catch((error) => {
            reject(new Error(`Unable to retrieve events0.\n${error.message}`));
          }
        );    
      })
      .catch((error)=> {
          reject(new Error(`Unable to retrieve events 1.\n${error.message}`));
        }
      );
    });       
  },
  // @overwrite discard
  discard: (error, action, retries) => {
    console.log(error);
    //return true;
    return retries > 3;
  },
  // @overwrite retry
  retry: (action) => (action.meta.urgent ? 100 : 10000),
  //returnPromises: false,
  /*
  queue: (action) => {
    console.log(action);
  }
  */
  // @overwrite persist
};
export const store = createStore(rootReducer, undefined, offline(offlineConfig2));

An action itself.

export const sendRepairPhotos = (identifier, token, auto_number, kilometers, message, photoPath, photoArray = []) => {
    console.log('send repair photos');
        return ({
            type: REPAIR_PHOTOS,
            //payload: { token },
            meta: {
            offline: {
                effect: { url: global.apiUrl + 'trucks_malfunctions/register', method: 'POST', body: {km: kilometers,
                                                                                                auto_id: auto_number,
                                                                                                identifier: identifier,
                                                                                                message: message
                                                                                            },
                                                                                            photo: photoArray, 
                                                                                            token:token },
            }
            }
        })
};

if helped I can attach another info, but basically faced cache size problem, as well how that react-native caches work at all? Does it take effect in memory usage or just sits unused? How can i manage to remove them automatically and optimize? every comment is welcome.


Solution

  • Responding to myself question, thought later but maybe it will be helpfull for other as well. I was used RNCAMERA which saves captured images in temp folders.

    By using redux offline for sending requests with images is important to delete images unless the app data and caches grows. Whats can be done with file managing modules such RN fetch blob, rn fs or so.