thunk actions fired in offline mode are saved as null inside actionQueue

[codeamo]

Current Behavior

I am using redux-thunk as middleware and I am unable to store thunk actions to action queue in offline mode. the only thing I see on my redux dev tools state tree is an array of null.

• Here is my thunk

 export const saveProfilePicture = (downloadURL: string) => {
  async function thunk(dispatch: Dispatch) {
    const SAVE_PROFILE = gql`
      mutation SaveProfile($url: String!) {
        saveProfile(url: $url) {
          profilePic
        }
      }
    `;

    try {
      dispatch(saveProfileRequest());
      const data = await graphQLClient.request(SAVE_PROFILE, {
        url: downloadURL
      });

      const {
        saveProfile: { profilePic }
      } = data;

      dispatch(saveProfileSuccess(profilePic));
    } catch (error) {
      dispatch(saveProfileFailure(error.message));
    }
  }

  thunk.interceptInOffline = true;
  thunk.meta = {
    retry: true,
    name: 'saveProfilePicture',
    args: [downloadURL]
  };
  return thunk;
};

• Note: I am also using redux-persist but I have blacklisted the network reducer from persisting.

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

• Include a screenshot if it makes sense.
  I don't know why but when offline action is fired, the payload of the action also seems to be empty.

Expected Behavior

• I was expecting the thunk action to be added to the action queue and not null.

Your Environment

software	version
react-native-offline	"^5.7.0"
react-native	"0.63.4"
node	v12.18.3
npm or yarn	npm

[KyleAsaff]

I have been having the same issue and have been trying to debug this for the last 24 hours. It has nothing to do with redux-persist

From what I can gather, react-native-offline is not serializing the payload (prevThunk) correctly and therefore the payload of the action becomes {} which also makes the actionQueue [null].

I created this snack to showcase the problem:
https://snack.expo.io/@kyleasaff/github.com-kyleasaff-react-native-offline-bug

https://github.com/KyleAsaff/react-native-offline-bug

As you can see from the screenshot below when I run the code from the snack on my computer, redux-logger shows that react-native-offline is dispatching an action with a payload of prevThunk but if you look in redux dev tools the whole payload turns into {}.

Anyone have any insight here?

[josehernandezv]

Is there a solution for this issue?

[KyleAsaff]

Is there a solution for this issue?

no. I debugged what I could and set up a snack to easily reproduce the bug. I am still waiting for a maintainer/contributor to comment on the issue.

I am unfortunately still waiting for a fix as well.

[rgommezz]

Hey guys,

Sorry for the late reply, unfortunately I don't have too much time to keep an active eye on this library anymore. However, I'll try to shed some light based on your comments/screenshots.

I haven't used redux dev tools for a while, but it seems it's not serialising any function at all and shallows them, probably some custom filter or alternatively it may convert the JS objects internally to JSON and JSON.stringify(foo) will filter out any function by default.

Again, this is hypothetical, but the fact that redux-logger displays functions on the other hand points out that each logger treats functions differently. This library is totally decoupled from whatever logger tool you wish to use.

That being said, @codeamo your configuration seems incomplete. You are not persisting the offline queue but wrote some configuration to do so, namely:

  thunk.meta = {
    retry: true, // This is for intercepting in memory
    name: 'saveProfilePicture', // This is for persisting
    args: [downloadURL] // This is for persisting
  };

Please doublecheck the docs. I'd recommend to not blacklist network reducer and in addition follow this example to add a custom transform to redux persist.

[KyleAsaff]

hey @rgommezz thanks for the response

I haven't used redux dev tools for a while, but it seems it's not serialising any function at all and shallows them, probably some custom filter or alternatively it may convert the JS objects internally to JSON and JSON.stringify(foo) will filter out any function by default.

Again, this is hypothetical, but the fact that redux-logger displays functions on the other hand points out that each logger treats functions differently. This library is totally decoupled from whatever logger tool you wish to use.

now knowing this I will give it another shot and report back with my findings. I plan to work on my app's offline mode within the next few weeks.

[sicero]

Is there any update on this? I am not using redux-persist and still the thunks are added to the queue as null?

[jainmca21]

I am also facing null issue and not using redux-persist.

[edgaru]

Any solution?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[IsaacIsrael]

Hey guys,

Sorry for the late reply, unfortunately I don't have too much time to keep an active eye on this library anymore. However, I'll try to shed some light based on your comments/screenshots.

I haven't used redux dev tools for a while, but it seems it's not serialising any function at all and shallows them, probably some custom filter or alternatively it may convert the JS objects internally to JSON and JSON.stringify(foo) will filter out any function by default.

Again, this is hypothetical, but the fact that redux-logger displays functions on the other hand points out that each logger treats functions differently. This library is totally decoupled from whatever logger tool you wish to use.

That being said, @codeamo your configuration seems incomplete. You are not persisting the offline queue but wrote some configuration to do so, namely:

  thunk.meta = {
    retry: true, // This is for intercepting in memory
    name: 'saveProfilePicture', // This is for persisting
    args: [downloadURL] // This is for persisting
  };

Please doublecheck the docs. I'd recommend to not blacklist network reducer and in addition follow this example to add a custom transform to redux persist.

Hey, I don't know if still relevant but this worked for me