Aurelia Store and redux dev tools

We’re integrating aurelia store into our app and would like to get to the point where we can use redux dev tools to navigate back and forth between the states and record/replay. I’ve briefly tried this out and hit a couple of issues:

  1. In order to allow back and forth I assume we would need the router to react to changes in the state rather than the state update from the router? We’d need to store current route on the state and have the router respond when that value changes. Is this correct?

  2. We cannot have any side-effects happening on activate like we normally do, such as calling an api, as they would be fired when replaying. Presumbaly this should all happen in middleware? If we do need to put it in middleware, the only way I can see this working is that the middleware would need to look at the route too. When changing routes, we’d need to set a navigating or activating property on the state so that the middleware to call the api knows it needs to fire. It would then set the activating property to false when the call is complete and the data is ready (or we could rely on the data being null/not null)

  3. It looks like middleware is called when going back and forth in redux dev tools, I would assume that it should not fire?

  4. Is it OK to dispatch an action in middleware? Couldn’t you easily get into an infinite loop of middleware?

  5. Am I on the right track with all this or is aurelia store not really designed for this?

Lots of great questions, let’s tackle them one by one.

  1. There is a aurelia-store port of the original contacts sample available here which shows off how to use the router together with Aurelia store

  2. the sample makes use of a local boolean gate isDevToolsNavigation to understand whether the navigation got triggered by a devtools history jump. The sample subscribes to router events via the EventAggregator to dispatch a routerPerformedNavigation, which again stores the current route in the state.
    With regards to side-effects on activate its definitely up to your use-case. In the contacts sample I’ve kept the contact-details activate method since the side-effect was performing essentially what was already set with the state. But if you want to skip them you’re right a middleware could be the way to go.

  3. A middleware is called on all dispatches. So that means also on your DevTools jumps. What you could do though is to infer the dispatching action as described in the docs inside the middleware and treat them exclusively. So that would kinda result in a Redux DevTools navigation middleware. Actions which should be treated could be configured via middleware settings.

  4. Since a middleware returns a state there is no need to call another dispatch, but instead simply compose your middlewares final state by function calls.

function firstAction() { ... }
function potentiallyAnotherAction() { ... }

function reduxDevToolsNavMiddleware(currentState, originalState, _, action) => {
    if (action.name === 'YOUR ACTIONS NAME') {
      return potentiallyAnotherAction(yourDesiredAction(originalState));
    }
};
  1. Heck yeah I think you’re on the right track and it would be great if you could share a sample so I can help out on specific issues. Also I do think this is doable with the store, so having a nice sample we can see whats missing and update the docs or either create a new sample for future reference
2 Likes

Thanks, that’s great info. I’ll try to make a small example app to test out some ideas.

2 Likes