Redux integration

[elboman]

I'd like to discuss a bit what could be a great Redux integration with UI-Router.

NB: There is nothing preventing you from using Redux in combination with the router right now, as you can simply connect() your "state component" and that's it.

There are some features that I think might be useful:

• sync the url location in the redux store whenever changes
• trigger navigation via redux actions

I'm not a time-travel user so I honestly don't know how many people rely on it but I think it could be supported if it makes sense.

Let me know what you have in mind 😉

[Hotell]

you need any help with this? btw terrific job by adopting the ui-router for react! the best solution out there for routing with React

[18601673727]

yeah react-router sucks, if ui-router could integrate with redux plus server side rendering support then the world would been a better place!

[mheppner]

Any updates on this? I'm a long time ui-router user but I'm trying to switch to React and would love to take one of my favorite routers with me!

Does anyone have suggestions for integrating the two? Maybe something like neilff/redux-ui-router? Specifically, it'd be nice to use async actions in combination with the ui-router transitions (similar to resolve()).

[elboman]

@mheppner Sure! I started working on it: https://github.com/elboman/ui-router-redux

The package is not published yet, so you have to build it yourself locally and npm link/yarn link it to your project.

What it does:

• dispatch a Redux action each time a transition occurs.
• keep transitioning information in state

I still have to figure out the last piece, which is triggering transitions using redux actions, because of a circular dependency issue. Because of this, once it's done, the API might change!

I'm not set on how to integrate resolves and redux, since everyone uses redux in some different ways. So far this is what I've done:

const someState = {
  url: '/',
  name: 'home',
  component: Home,
  resolve: [{
    token: 'MyData',
    deps: ['ApiService', 'store'],
    resolveFn: (ApiService, store) => ApiService.getMyData()
      .then(data => store.dispatch({ type: 'someType', data }))
  }]
}

This way the transition waits for the resolve to fetch the data, once fetched, the store dispatches the action and then it goes on with the transition. Once the transition is set and the state component is mounted, the redux store will have the data inside and you can access it from there instead of the resolves prop.

This assumes you have available some ApiService and the redux store in the router injector. To achieve this you can create a parent state for the whole application (I call it app state) which should be abstract. I then resolve in the state the service and the store with a EAGER policy (to be sure they are resolved before the transition starts):

const appState = {
  name: 'app',
  abstract: true,
  resolve: [
    { token: 'ApiService', resolveFn: () => ApiService },
    { token: 'store', resolveFn: () => store },
  ],
  resolvePolicy: {
    when: 'EAGER'
  },
  component: UIView
}

Hope this helps, let me know what you think and if you need any help to set up the redux plugin.
Once the plugin is finished we will publish it and I'll ping you here!

[mheppner]

@elboman great work, this looks promising! 👏

If I was more experienced with react+redux, I'd offer to help, but some of this is a bit over my head right now.

[elboman]

Package has been released, the repo can be found here: https://github.com/ui-router/redux