Comments (6)
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
from react.
@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!
from react.
yeah react-router sucks, if ui-router could integrate with redux plus server side rendering support then the world would been a better place!
from react.
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()
).
from react.
@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.
from react.
Package has been released, the repo can be found here: https://github.com/ui-router/redux
from react.
Related Issues (20)
- Can ui-router/react support React18 new features? HOT 6
- testing ui router with relative paths
- {location: 'replace'} doesn't work in stateService.go(stateName, params, {location: 'replace'}) HOT 1
- useSref: "target="_blank" ignored when link contains child elements HOT 1
- Is this project still under active development? HOT 3
- Use same UIRouter instance inside different React.render(...) HOT 1
- Typescript demo errors on `1.0.1` HOT 1
- animating-transitions demo errors on `1.0.1` HOT 1
- Router.start() called more than once HOT 1
- 404 on react-dom.js on the tutorial pages HOT 2
- Path duplication after page refresh when using UIRouter pushStateLocationPlugin HOT 4
- Params of type json are not deserialized properly HOT 5
- States not gets enabled if there are nested lazy loaded states HOT 2
- UIView Doesn't Render with Usage of `urlService.rules.when` HOT 4
- Scroll restoration HOT 3
- Cannot use useRouter HOT 4
- Jest/Enzyme Transition Rejection/TypeError HOT 1
- UISref Component ignores target="_blank" on child anchor tag HOT 3
- Mocking UiRouter Classes with Jest HOT 4
- useCurrentStateAndParams don't reacting on initial state HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.