redux-offline: Redux state is missing “offline” part from redux offline

@echoes221 You were spot on! Below code logs the outbox and my action with all the data I need to make my cancel action work.

Thanks so much for the help. If you want to earn some quick SO points, you can write an answer at my SO question here: https://stackoverflow.com/questions/50798722/redux-state-is-missing-offline-part-from-redux-offline - if you’d rather save the time, I’ll write my own answer 😃

You guys rock 💪

import defaultQueue from '@redux-offline/redux-offline/lib/defaults/queue';
public queue = {
    ...defaultQueue,
    enqueue(outbox, action) {
        if (action.type === 'CANCEL_OFFLINE_ACTION') {
            console.log(outbox, action)
            return outbox;
        } else {
            return [...outbox, action];
        }
    }
};

Epics shouldn’t effect what you’re seeing in the reducer at all. redux-observable setup is very straight forward and should just look like:

createStore(
  s => s, 
  {},
  compose(
    applyMiddleware(
      createEpicMiddleware(combineEpics(epic1, epic2))
    )
  )
)

But if that all works, I don’t think that’s your issue. V1 setup of redux-observable is slightly different but it does introduce breaking changes, so be careful of upgrading - I’d read the migration guide here.

I digress, this isn’t the observable package here. I’ve not used redux with ng before - any chance you can do a basic setup in a playground (codepen etc) if the suggestion below doesn’t work? I think that maybe we’re tackling this the wrong way around as you won’t be able to do what you want to do at the level that you’re doing it because redux offline replaces it’s reducer in dynamically in the background.

Going back to your original question - you want to remove actions from the offline.outbox correct? You should be able to do that by writing your own queue implementation instead of trying to do it at the root reducer level.

You could try dispatch your 'CANCEL_OFFLINE_ACTION' as an actual offline action (to allow it to pass through the offline middleware) and do your state change in a custom enqueue function. Here’s a really rough example, it just filters out actions from the outbox that match the cancel actions Id, the cancel offline action is never added to the outbox:

// the action to dispatch
const action = {
  type: 'CANCEL_OFFLINE_ACTION',
  payload: {
    id: 123,
  },
  meta: {
    offline: {
      effect: { url: '' },
    },
  },
};

// the custom enqueue action
function enqueue(outbox, incomingAction) {
  return incomingAction.type !== 'CANCEL_OFFLINE_ACTION'
    ? [...outbox, incomingAction]
    : outbox.filter(
      outboxAction => outboxAction.payload.id !== incomingAction.payload.id,
    );
}

Note, this is completely untested and a complete shot in the dark. But the enqueue function is the one that is called in redux-offline’s reducer so it gives you the access you need to make the change…or at least I hope it will.

Thanks 😃 I have accepted your answer. Have a splendid day 😃