I have two basic questions (dont need anyone to write the code or something, just to see different directions).
When using react, react-router and redux what is the best approach to setup user authentication (using jwt)? I have researched a lot of articles and everyone uses different approach, so it becomes a bit confusing and everyone has different opinion saying other way is wrong etc...
What way and where is the best place to store user token and all informations related to that?
How to prevent user from accessing specific routes, what is best approach to do this and where exactly?
Imagine that app is ugins react, react-router for route setup and redux.
Check auth wrapper - nice solution for your problem.
Related
As I understand if we make a request by using redux-saga, the response is going to be stored into the redux store. But it is a bad practice to store all the stuff in the redux store. So is it ok to create separate module with API requests and use them when you do not want to put response in redux store ?
I would appreciate articles on this topic (couldn't find it on my own).
Making requests in a file is totally fine in some cases. Just do it carefully in order to prevent interfering with app performance (if a component is rendered multiple time and you need just one request do it in the parent, etc.)
As for articles I couldn't find any to exactly this topic, but react docs have an example of api calls (please ignore the class one and check the hook example bellow). Now I would recommend you too use a service for this to abstract the fetch logic, but the idea is there and, while this cases shouldn't happen a lot, I don't see any reason to avoid this if you only need some data in a specific component and there is no use in saving it to the state .
EDIT:
You have runSaga which according to docs
Allows starting sagas outside the Redux middleware environment. Useful if you want to connect a Saga to external input/output, other than store actions.
So you don't really need another library. Regarding the architectural problem this is what I was trying to emphasis with the react docs. I don't know if there are any articles in this direction (on a quick search I couldn't find any either), but I think for most of the data you want a reducer to prevent unnecessary reloading of the same data.
However there isn't anything suggesting not to do it as far as I know (neither in docs, articles, etc.). Moreover, in some cases, this can a good thing, and the fact that no docs suggest otherwise is a prove in this direction IMO.
PS: Also a discussion about using saga without redux here
I have a SPA web application, in REACTJS for investment consultation. However, I have to refactor it to make it possible to share its states by link, so that the user shares the link and by the link the selected items are shared. I want to know if you have a solution through some lib nodeJs or React that helps me solve this problem. Thank you!
If you want to share react state with only an http link and there's no stateful backend, you don't have a lot of options other than keeping state data in the URL. There is a useQueryParams hook would give you the basic tools you need for something like that
https://github.com/pbeshai/use-query-params
You can see some discussion of this technique below with an independent implementation
https://medium.com/swlh/using-react-hooks-to-sync-your-component-state-with-the-url-query-string-81ccdfcb174f
React app Scenario
I have 2 views, UserLister and UserViewer. Both are at different urls. UserLister is a complex table (third party using ag-Grid), with fields, and sort and filtering. UserViewer is an exceedingly complex view with a ton of functionality that takes a while to load up. I want to make it really performant and user friendly to navigate back to UserLister after viewing an individual User. I want it to display all the same sorts and the same information as the user has set up.
To put it another way:
I want the changes that I (or any person) uses on listing page 1 to be available if someone navigates away and then directly back.
Idiomatic way to accomplish this?
How can I accomplish this best in react? is there some function of react-router that would apply here? I would prefer not to have to manage the ?100s? of different states that the UserLister has for sorting/filtering/selecting data manually.
React-router is routing library which manages browser history. You need another tool to save and share state between components. The idea is to make both UserLister and UserViewer to store and access information from some kind of global storage. So each time user enters specific Route data persists.
There are plenty of ways how to do that. Most idiomatic way is to use useReducer hook and then implement "vanilla" Flux architecture (aka unidirectional data flow) in your app.
If you don't want to write all boilerplate by yourself (no judgement here), you can look at Redux, which will do most background work for you.
Redux still requires some good amount of boilerplating. If you don't like it and feel more like streams and observables guy, you can use MobX, which implements reactive programming patterns for state management.
I'm creating a portal in React, and I need to allow login/logout of users, where if you are logged you can see some pages, otherwise you can't.
So far I've thought about having a variable 'isLogged' in the state of each component which need the user to be logged to be seeen, and pass the variable in the props among the these components.
Then, I saw I can also use the localStorage to save this variable (I'm ok with the fact that the user would remain logged as long as he will clear his chace).
The question I have is: is this ok, or it is not the right way to manage the session user (also considering security issues)?
If so, which is the correct one?
If it's useful to know, I'm not using Redux, and probably the portal will exploit only https protocol.
It may be very late but still You could try out this which is one of the best way to handle auth user
React - What is the best way to handle authenticated/logged in state?
I implemented dynamic routing following react-router huge apps example. now i want to use redux for easy state management but have no idea how to go from here.
the file directories are all nested with different routes and the code is separated to 7 chunks. is there any example or guide on how to migrate to redux from huge apps example that react-router gives?
Thanks.
You are looking for Redux-simple-Router. The idea is to store your router state in the redux store.
react-router does a great job of mapping the current URL to a component tree, and continually does so with any URL changes. This is very useful, but we really want to store this state in redux as well.
There is another package Redux-router. Which is also worth a look, but redux-simple-router does the job easily.
redux-router is another project which solves the same problem. However, it's far more complex. Take a quick look at the code for this library—it's extremely minimal. redux-router is much bigger and more complex.