Feat: Option to pass in custom comparison function

[LiquidSean]

#206

Motivation

This feature will allow users the option of passing in their own comparisonFn to comparing thunks or actions in the queue. Example of a use could be creating a comparisonFn to compare arguments of this thunk to other thunks in the queue to determine if adding is necessary. Part of my motivation for this, is the application I am working on. I have thunks that are hit multiple times but with different args and sometimes the same record but just a different value for a property. For a scenario like that I would want to add the thunks that are all unique as in updating or modifying different records. For the one that is modifying the same record I would want to replace the similar queued item with it.

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #206: Option to pass in a custom comparison function to detect similar thunks in queue

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[LiquidSean]

@rgommezz could you restart the build? Not sure why the build failed.

[rgommezz]

Hey @LiquidSean, fantastic work! 🏅

I've left some comments, nothing major.

Also, we need to update the documentation and the API.

For the API, we need to export the new factory function on the entry point, as well as maintain the previous reducer export, using the factory function, so that we are backwards compatible.

I am happy to help with those two, so just lemme know and once we are done code wise, I'll make the changes on your branch :)

[LiquidSean]

@rgommezz for maintaining backwards compatibility is this what you are looking for in the entry point file -

  get reducer() {
    return require('./redux/reducer').createReducer();
  },
  get createReducer() {
    return require('./redux/reducer').createReducer;
  },

[rgommezz]

For consistency, let's rename the file to createReducer and make that the default export.

Then on the API side, just do:

  get reducer() {
    return require('./redux/createReducer').default();
  },
  get createReducer() {
    return require('./redux/createReducer').default;
  },

[LiquidSean]

@rgommezz I have made changes to the documentation. I think I have everything needed.

[rgommezz]

Thanks @LiquidSean, I'll take a look this weekend!

Btw, I requested a bounty request on IssueHunt so that you can be rewarded for your work 💯 I encourage you to create an account, just follow the steps stated here

[LiquidSean]

Hey @rgommezz have you gotten a chance to look my changes over?

[rgommezz]

Thanks for the changes @LiquidSean! I think we are getting closer, but we need to improve the docs. Sorry if I misled you with something.

If you feel it's easier, I could jump into your fork and make the latest touches to the documentation. Up to you :)

[rgommezz]

That introduction should be placed at the beginning of the section here.

Usage

The library exposes a simple reducer or a factory function to tailor it a bit more to your needs.

Basic reducer

This reducer will use a preconfigured comparison function for the offline queue. Please check the docs here we should link to a new section inside offline queue where we explain the default behaviour, which is lodash.isEqual for plain actions and thunk.toString() for thunks/functions. We should basically explain there that If a similar action already existed on the queue, we remove it and push it again to the end of the queue

// configureStore.js
import { createStore, combineReducers } from 'redux'
import { reducer as network } from 'react-native-offline';

const rootReducer = combineReducers({
  // ... your other reducers here ...
  network,
});

const store = createStore(rootReducer);
export default store;

Factory function

This may be useful if you are using the offline queue and would like to have more control on how it behaves, particularly when determining whether an action already exists on the queue. That's why we expose a factory function as well, so that you can provide your own comparison function. You'd use it in the next way:

// configureStore.js
import { createStore, combineReducers } from 'redux'
import { reducer as network } from 'react-native-offline';
import { comparisonFn } from './utils';
const rootReducer = combineReducers({
  // ... your other reducers here ...
  network(comparisonFn),
});
const store = createStore(rootReducer);
export default store;

The comparison function receives the action dispatched when offline and the current actionQueue. The result of the function will be either undefined meaning no match found or the action that matches the passed in action.

function comparisonFn(
  action: ReduxAction | ReduxThunk,
  actionQueue: Array<ReduxAction | ReduxThunk>,
): ?(ReduxAction | ReduxThunk)

[LiquidSean]

@rgommezz I have made a few changes to the documentation. If you don't mind jumping in to update the remainder of the documentation that would be great. 👍

[rgommezz]

Awesome work! 👏 Just provided the last touches to the docs.

This is ready to be shipped. Please rebase with master first and we'll finally merge it!