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

How to properly use resolvers #4

Open
mczp opened this issue Mar 10, 2018 · 4 comments
Open

How to properly use resolvers #4

mczp opened this issue Mar 10, 2018 · 4 comments

Comments

@mczp
Copy link

mczp commented Mar 10, 2018

Coming from the old angular I loved the resolvers in ui-router, however I'm having trouble using them with Redux. My main issue is that usually I enclose my API into a service which was then injected into the router, however with redux, I have no idea how to achieve this... A little example/demo would be very helpful

@mczp
Copy link
Author

mczp commented Mar 11, 2018

After tinkering I figured a way to access the API from the injected transition, however I would still be interested about how to reconcile redux with the resolvers via action creators and reducers

@ghost
Copy link

ghost commented May 19, 2018

Don't know if this is the recommended way however I found that dependency injection is a bad idea, on the other side resolvers can be easily reconciled with the redux store, below is an example of a simple config I'm using:

import FabricsList from './components/fabric_list'

import { api } from 'api/wsrpc'
import { store } from 'app/store'
import { BROCADE_GET_FABRICS } from './actions/types'

// Configuration for routes [states]
export const states = [{
  name: 'app.fabrics',
  url: '/fabrics',
  resolve: [
    {
      token: 'fabrics',
      resolveFn: function () {
        // An API method which returns a promise
        let p = api.sendRequest(BROCADE_GET_FABRICS)
        // Register the callback to update redux store when promise gets resolved
        p.then((data)=> {
          store.dispatch({type: BROCADE_GET_FABRICS, data})
        })
        return p
      }
    }
  ],
  component: FabricsList,
}]

@elbaro
Copy link

elbaro commented May 20, 2018

Is there any other way to access dispatch() and avoid import store singleton?

@ghost
Copy link

ghost commented May 20, 2018

Technically yes, you can inject it into the router and use dependency injection to resolve it in the router resolve function. There might be another way perhaps by using redux bindActionCreators however on the doc page it says:

Normally you should just call dispatch directly on your Store instance. 
If you use Redux with React, react-redux will provide you with the dispatch 
function so you can call it directly, too.

So apparently it is normal to pass the singleton around...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants