CODEWITHSUNDEEP
reactjsreduxfluxreact-router-redux
Morphex
Morphex

Reputation: 306

React/Redux Where to save State

I am having trouble understanding some ReactJS and Redux principles,

In Redux we have a store and a set of reduceres that give your final state ( this part I get).

A Component receives props from their parent component, in case of Redux it passes the full state down with the Provider Component.

Now, lets assume this use case, I have my app state something like this :

auth :  { name,id, ..etc} -> this is actually a JWT Token with a set of claims...

I am building a Container (Page) to be able to edit user profiles, the catch here , and where I am having trouble, I also want this page to handle a arbitrary user edit (in case admin is editing a account).

I am rendering my Page by using redux-router like this :

  <Route path="/user" component={RequiresAuth(UsersPage) } >
      <IndexRoute component={RequiresAuth(UsersOverview) }/>
      <Route path="/user/overview" component={UsersOverview} />
      <Route path="/user/account" component={AccountManagement} >
        <IndexRoute component={RequiresAuth(AccountManagement) }/>
          <Route path="/user/account/:userid" component={AccountManagement} />
      </Route>

So reading the docs, I assume my props will have a userid which will override my default user if present.

Questions: Is this approach correct? The Route Handling?

If I pass a userid param on the route, how do I proceed to load the user info and where? The way I see it, I need to dispatch an action, but I am not sure where to set the state , if on the store, or the component.

Also, Where would I load my user information? (constructor comes to mind)... or should it be in WillMount/WillReceiveProps?

Thank you.

Upvotes: 0

Views: 3687

Answers (1)

Hugo Martinez
Hugo Martinez

Reputation: 78

If you really have a hard time to understand React/Redux principles i suggest you to try this tutorial :

https://github.com/happypoulp/redux-tutorial

It helped me a lot when i first started with React/Redux. By the way it's a bit hard to really answer your question because you re asking specific questions on a really specific case :)

Upvotes: 0

Related Questions