Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redux integration #9

Closed
elboman opened this issue Oct 31, 2016 · 6 comments
Closed

Redux integration #9

elboman opened this issue Oct 31, 2016 · 6 comments

Comments

@elboman
Copy link
Member

elboman commented Oct 31, 2016

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
Copy link

Hotell commented Nov 3, 2016

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
Copy link

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
Copy link

mheppner commented Mar 8, 2017

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
Copy link
Member Author

elboman commented Mar 8, 2017

@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
Copy link

mheppner commented Mar 9, 2017

@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
Copy link
Member Author

elboman commented Dec 9, 2017

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

@elboman elboman closed this as completed Dec 9, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants