Easy-peasy: Using Easy Peasy store to store user info and auth state

[coooolers]

Hi

Can anyone help me out what exactly is the "right" (or probably the best) way to store user information, his/her registration, login, logout. confirm email, handle forgot password using easy-peasy features?

Shall I use local storage to make sure that the same state is available in different browser tabs? Or, is there some other better means?

I had a look at several examples on github but I am not satisfied. Most of them are invoking the backend API requests from the storeitself using thunks. Is thiss a right approach?

Code snippets will be really helpful.

Thank you.

[coooolers]

If possible, pl. guide me whether I should make backend API calls from the store itself or shall I do it from my React components?

Thanks

[JM-Mendez]

You should make all your api calls from thunks. That's what they're used for, to separate your side effect logic from your components.

[ctrlplusb]

Hmm, this is a bit of a philosophical question really, and I feel that the classic answer applies: "It depends"

You can completely feel free to use Easy Peasy as a dumb store with no thunks firing API calls etc, or you could centralise all your API logic within Easy Peasy thunks. I don't think either way is right/wrong. With new technologies, such as GraphQL, I've been leaning on performing more network calls within my components themselves and simply use Easy Peasy to represent shared state across components.

Equally, I wouldn't blindly put all state in Easy Peasy. I tend to try to localise my state to a component first and then lift it into Easy Peasy if I feel there is value. Again, this is just one strategy. I don't think there is an inherent right/wrong approach here either.

[ctrlplusb]

Shall I use local storage to make sure that the same state is available in different browser tabs? Or, is there some other better means?

I had a look at several examples on github but I am not satisfied. Most of them are invoking the backend API requests from the storeitself using thunks. Is thiss a right approach?

My personal strategy is to make an API call for login which results in a Cookie being returned by the server, containing the session token.

On application initial mount I check for this token and then rehydrate the user session by making a call to get the user details again (e.g. a /me endpoint).

[coooolers]

With new technologies, such as GraphQL, I've been leaning on performing more network calls within my components themselves and simply use Easy Peasy to represent shared state across components.

Equally, I wouldn't blindly put all state in Easy Peasy. I tend to try to localise my state to a component first and then lift it into Easy Peasy if I feel there is value. Again, this is just one strategy. I don't think there is an inherent right/wrong approach here either.

I'd prefer this approach. Thanks for confirming my viewpoint.