Example is difficult to learn from

[WolfieWerewolf]

Guys, I think the work you have done here is great. The example works perfectly and eventually this is going to meet my requirements completely. I am quite experienced with Angular and ui-router but have absolutely no experience with redux, babel or webpack so I'm finding your example a little difficult to duplicate outside of the redux-ui-router package. When you link back to the dependencies that you've already established for the package itself, for use in the example, it makes it difficult to discern what's required for a typical implementation. For example I created an new app, copied the contents of example to that folder, added redux-ui-router to the package.json, npm installed it all and changed the two references in index.js from ../src to the module itself. I had hoped that this would be enough but I get errors about not being able to use import which I suspect is coming from webpack / babel but I don't know as I'm a self proclaimed noob with that technology. This isn't a criticism but a lot of guys won't ask a question because they don't want to look stupid and so they just don't use your stuff. I don't mind putting my hand up and saying I'm as dumb as wood whenever I start learning a new technology and examples that demonstrate a typical use case really go along way to helping me to wrap my tiny little brain around it.

I'm not asking you to do anything here just making a suggestion that might help to get your project out there. Thanks again for developing this fine project!

Kind Regards

/W

[dmachat]

@WolfieWerewolf I put together a standalone sample app that might help. You can check it out here

[hally9k]

This a totally valid point... I might well have a little look at this soon. I'll start by checking out your sample @dmachat ... Nice one! 👍

[xlozinguez]

I agree with @WolfieWerewolf, I am struggling with how to use the router action such as stateGo when clicking on a given list items.
I have been over your sample app @dmachat and it does not really reflect that use case.

I'm going to keep digging until I manage to make it work. It would be beneficial to have a standalone example addressing the common list + detail use case @hally9k.

Once I figure it out, I will build upon @dmachat example and propose an updated sample.

[hally9k]

Hi @xlozinguez, can you explain what you mean when you say 'the common list + detail use case'? The redux-ui-router just provides actions for each ui-router transition so you can trigger a transition by dispatching the appropriate action. In the example if you look at the app.child1 state's template on line 83 you can see ng-click="stateGo('app.child2')". This is the click event directly calling the action that is bound to the state's scope by ng-redux. If you look at the example and see the template of the root state on line 49 you'll see that it's using ui-sref as you would when just using ui-router on it's own. The redux-ui-router listens for any transitions and fires the appropriate action for you. If you elaborate on your use case I can try and help you further...

[xlozinguez]

@hally9k sure, I was referring to the example such as https://ui-router.github.io/tutorial/ng1/hellosolarsystem for instance.
I guess the place I am confused is how to handle the data fetch when performing the routing. Should it be part of the route's resolve or should it be handled in the object initialization?

Hope this help narrowing down my question...

[hally9k]

@xlozinguez, sure. When you say 'data fetch' you are referring to an asynchronous call, correct? With the example you linked to it makes the asynchronous call in the resolve of the router state. With redux we push all the non pure functionality into actions, AJAX calls are I/O and therefore impure so in the resolve we must call an action. Enter Thunk! When you want to do async calls in actions you can use a thunk to defer dispatching the action until an async task has completed. Return the promise from the thunk so that the resolve knows when the data is available.

Heres a snippet example:

The state:

...
resolve: {
      bounds: function($ngRedux) {
         return $ngRedux.dispatch(actions.dataFetched());
   }
}
...

The action

...
export function dataFetched() {
  return dispatch => {
    return http.get('MyApp/FetchData')
    .then(
      function(res) {
        dispatch({
            type: 'MY_APP::DATA_FETCHED',
            payload: res
        });
      },
      function(err) {
        throw err;
      }
    )
  }
}
...

I am currently working on a clearer example app so I will add thunks and async resolves into that and hopefully it wont be so confusing in future.

Let me know if this is what you were after or not ;)

[xlozinguez]

@hally9k thanks for taking the time to respond, for some reason I missed that post... I knew I was missing something about thunk (sorry I'm digging into redux + rxjs and I'm getting all over the place :P)
I will apply what you just describe and let you know. For reference, here's the project I'm playing with, maybe it can help you with your example? https://github.com/xlozinguez/compoc

[xlozinguez]

Actually, after reading further your example, it seems that it's a job that RxJS would handle for me with the observables... so I'm on the right track (see my redux-rx branch - still WiP :) )

Thanks again!

[hally9k]

Oh cool, I'll definitely have a look at this. Haven't had a chance to really jam with RxJS yet. Let you know what I think... 😄

[rshackleton]

I have used an example more akin to the "real world" Redux example (https://github.com/reactjs/redux/tree/master/examples/real-world) where an action is dispatched and then handled by an API middleware. This means that I have no promise to return for the resolve call.

I was considering dispatching an action to store a promise and then mark the promise as resolved after the middleware has dispatched an error or success action.

Any thoughts on the best way to approach this? Has anyone tried this approach?

[ntwarijoshua]

@hally9k about the clear exmple you mentioned have you had some time to work it out! the above seems not to be working for me. thanks