Documentation example on how to integrate with a redux/flux architecture

[jmacedoit]

"The component doesn't depend from any Flux implementation and allows to intercept all route actions by adding Actions.onPush/onReplace/onPop handlers from your store(s)"

I think an example on how to accomplish this would be very valuable. From inspecting the code, I have an idea on how I could do it, but I'm not sure if it's the proper way.

[aksonov]

The problem that for now i don't see use cases to use onPush/onReplace/onPop, maybe you could provide some use cases when it is needed?

[jmacedoit]

Perhaps a "log out" case where you need to manipulate some data in onPop?

[aksonov]

Again, i don't see how onPop could be used here. You just executes two actions, one - logical, 'logout' for your flux/redux which will manipulate all needed data and doing pop at the same time...

<Button onPress={()=>{Actions.pop(),this.dispatch(logout())} }>Logout

Yeah. just some hint, please. I just don't know how to combine that with a state. Redux pass it in props to the root component, but it's a router, how does the info get passed down to actual 'screen' down there? Lost here (sorry n00b atm, just starting w/ redux).

[aksonov]

I believe info passed via react context. Check it http://rackt.org/redux/docs/basics/UsageWithReact.html
I'm just using these two steps and everything works well (root Provider, then connect each screen).
Maybe you could do redux demo, it would be really great.

I have read though the that page already, thanks. I understood how to connect things there, but there, root (in App.js) was connected, and it was passed state to select function, where it selected relevant subsets and used then directly in the render JSX in the components.

But here, those components are not specified at all. There are only routes. I do not understand how the data gets passed to the 'screen' components themselves (or do I add it to the Route and it gets passed down to the component?)

[aksonov]

For Route you define 'component' class, that class should be 'connected'. Data passed via inner context, as i understand.

Ok, I probably understand now. I use Provider to specify store for an app, and then I need to connect every single 'visual' component, adding specific select function for each of it (so every one select its own relevant subset), and if I have hierarachy of visual components, then I only connect the roots of the trees in the visual forest (and passing the rest down via props as shown in other redux-react tutorials). Am I right @aksonov?

[aksonov]

Right

Thanks. ;-)

[jmacedoit]

You are right, and I agree with you. I just lacked a better example - The thing is I'm coming from your other implementation using redux and I have a mix of questions that I'm not sure are related...I'm starting to think that my true question is related to custom actions. In redux router, your reducer returned a state which was used by the router component to know how it should render itself. I could, however, create my own reducer to process custom actions that were supposed to change the route stack in a way different than the simple push /pop /replace primitives. What is the way to accomplish that here ? Is it related to onPop, onReplace, etc...?

[aksonov]

Please give me real use case, I will think about it

Pavel.

11 дек. 2015 г., в 21:56, João Macedo notifications@github.com написал(а):

You are right, and I agree with you. I just lacked a better example - The thing is I'm coming from your other implementation using redux and I have a mix of questions that I'm not sure are related...I'm starting to think that my true question is related to custom actions. In redux router, your reducer returned a state which was used by the router component to know how it should render itself. I could, however, create my own reducer to process custom actions that were supposed to change the route stack in a way different than the simple push /pop /replace primitives. What is the way to accomplish that here ? Is it related to onPop, onReplace, etc...?

—
Reply to this email directly or view it on GitHub.

[jmacedoit]

Please let me know if this should be in a different issue:

Imagine there's LogIn, MembersArea and EditProfile scenes/routes. And that after the user logs in, he should go to EditProfile, but with MembersArea also in the stack, and not LogIn.

So this is the route stack evolution I want:

[Login]----logs in---->[MembersArea,EditProfile]----back (pop)--->[MembersArea]

How am supposed to do the log in step in terms of Action calls?

[arcmode]

Hi, thanks for sharing this, it's very valuable. This is what I'm doing, please correct me if there is a more "idiomatic" way to do it.

Logic that I want attached to a specific routing event (like navigate from here to there implies that ...) is being dispatched as plain actions alongside the routing action. But, logic that should be attached to every routing event (like serialising, remote controlling, automatic fetching) is embedded in some "higher order action" that manages routing actions.

PS: However, as the routing actions are abstracted away, it's not 100% clear how to achieve what @jmacedoit is trying to do with the stack. Perhaps a public api for action creators might be a good approach.

[mangogogos]

So Im gathering that route components MUST be connected? The design I had in mind is a container which is connected and passes those props down to purely visual scenes, chosen by the current route. Is there a way I can get this type of behaviour without having to connect too many components? I really don't need to have any components but the container be connected