I am writing a simple login page.
After user clicks on login button, I will be receiving a user authentication token if the login is successful.
I would like to store the token in to a simple sqlite storage.
Where should I put this logic? (The async opening db, updating db logic), I am currently putting them in the action creators for the SUCCESS_LOGIN action. But what does redux recommend?
There are multiple questions like this one:
How to handle complex side-effects in Redux?
How to handle side effects in react/redux?
Personally I use redux-saga, but redux-loop is also very popular.
If it's a simple application you could use redux-thunk or you are probably ok with your current approach, no need to add more libraries and boilerplate if you have all the functionality done.
Related
I got confused with the right data flow when I have a backend API and a redux state that passing the data to the components.
The question is: What is the right methodology to handle 2 data resources, API and Redux?
should I update the state and then fire a send request to the API with the update?
or, let the redux send that request for me every time the state changes?
or, should I update the API directly and then fire a get request to update the Redux store?
I'm really confused and do not know what is right approach should I take with less error in the future use
Appreciate any help, even sending me an article that talks about this issue and I'm gonna read it
Thank you
should I update the state and then fire a send request to the API with the update?
That's called "optimistic update", the advantage is that your app feels fast and responsive, since the network delay is hidden from the user. The downside is that the request might fail and you have to undo what the user did and inform them that it failed. For simple operations (for example marking a product as a favorite in an ecommerce website) this works great in my opinion.
To explain how it works with the example in mind:
User action triggers update of redux state (product is immediately shown as favourite on the page)
At the same time, an API request is fired to favourite the product on the backend side.
You fetch the product data again from the API and render it
Now either the request has successfully changed the product, so visually nothing changes on the page for the user - to them it looks like the operation happened without network delay - Or the request failed and you show the old state where the product is not a favourite and and error message appears.
or, let the redux send that request for me every time the state changes?
Parts of redux-toolkit embrace this approach if I'm not mistaken. If you decide to go down this road, I'd recommend to not implement it yourself but instead rely on existing libraries/middlewares.
or, should I update the API directly and then fire a get request to update the Redux store?
This is the classic, safe, and simple approach.
My advice is:
If you have lots and lots of CRUD operations against your API, and you want to not write lots of boilerplate code, look into redux-toolkit (specifically https://redux-toolkit.js.org/rtk-query/overview ).
If you care about perceived performance of your app, try optimistic update.
If you want to keep it simple and just get things to work, follow the classic approach.
I'm very new to React Native (did some courses) and now building my first app on my own which is going great, but I need some advice regarding user applied filters and how to handle this.
Quick summary of what needs to be done.
The user should be able to set some filters so only certain data is displayed and this state is saved even after closing the application, user logs in again and still sees only the data that is filtered because of the filter option he/she set before.
In one of my courses I got an introduction into Redux and my question here is should I use Redux for this feature or maybe Context for this ? My data is fetched from Firestore and I'm able to use a query to filter data from firestore but that just ends up in many read/writes which cost money.
All advice is more than welcome!
use redux
when you need some static state globally in your app then use context like open close drawer etc. For dynamic states go for redux
As mentioned in stackoverflow answer :
As Context is no longer an experimental feature and you can use
Context in your application directly and it is going to be great for
passing down data to deeply nested components which is what it was
designed for.
As Mark Erikson has written in his blog:
If you're only using Redux to avoid passing down props, context could
replace Redux - but then you probably didn't need Redux in the first
place.
Context also doesn't give you anything like the Redux DevTools, the
ability to trace your state updates, middleware to add centralized
application logic, and other powerful capabilities that Redux enables.
Redux is much more powerful and provides a large number of features
that the Context API doesn't provide, also as #danAbramov mentioned
React Redux uses context internally but it doesn’t expose this fact in
the public API. So you should feel much safer using context via React
Redux than directly because if it changes, the burden of updating the
code will be on React Redux and not you.
It's up to Redux to actually update its implementation to adhere with
the latest Context API.
The latest Context API can be used for Applications where you would
simply be using Redux to pass data between components, however
applications which use centralized data and handle API requests in
Action creators using redux-thunk or redux-saga still would need
Redux. Apart from this Redux has other libraries associated with it
like redux-persist which allows you to save/store data in localStorage
and rehydrate on refresh which is what the Context API still doesn't
support.
You can refer to the blog1 and blog2 in order to get more clarity on when to use redux and context.
I am new to redux/redux saga and I am trying to develop an app where I have two browsers interacting with each other via redux saga actions. Currently, I am able to dispatch actions within the same browser, but if I want to dispatch an action to the other browser, the app does not appear to be responding to the dispatched actions. I'm pretty much using the tutorial on https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html for my code.
Before I share my code I want to understand if it is possible to dispatch an action using redux to another user on a different browser. If so, can someone please help me understand how to do so?
You could establish a websocket connection to your server and subscribe to actions to dispatch on each browsers redux store (Publish-Subscribe).
Its not an easy task though. You will have to make sure the actions are dispatched in the exact same order in each browser, to make sure to keep the states synchronized.
Downside is, in order to maintain order, you will have to wait for your server to process your actions, and have no immediate visual feedback (or at least delayed by networking). So you will probably end up with two separate stores, or have to handle that delay somehow visually.
I have a working auth flow for a React/Redux app, and I'm using reselect and redux-saga to handle state selection and async login/register functionality.
I have a single container that I've been using for testing, with login, register, logout all working. However, now I'm trying to figure out the "right" way to structure the app.
Should my login form and register form be their own containers with all functionality built in? If I do that, I find myself duplicating certain actions and code, such as the SET_AUTH action.
Is it "correct" to duplicate the code and separate the containers? Or is there some other way I'm missing?
I ended up creating my authentication containers and reducers globally, in my root container (App.js), and then just dispatching actions from around my app - since the sagas are global they're always available, and simply wait for the dispatched actions.
For managing state per container I ended up using reselect to grab state slices from various parts of the app.
I want to enable an user to be able to communicate with other users through a site. I know that ASP.net is stateless, but what can I use for this synced communication? Java servlets?
I don't think you need to set up Java just to use a servlet for this. I would use AJAX and the database. I don't know ASP.NET but I PHP is similar in this case, being also basically "stateless". If you want to display some kind of asynchronous communication between two different users, say, from two different sessions, without a lot of refreshing (like chat), you can have the AJAX page constantly poll the database for new messages, and display them when they come in. You can also use AJAX to insert the new messages, giving the user read/write access to this messages data structure. Since the "other" user is doing the same thing, user A should see new messages pop up when user B types them in.
Is that what you mean?
You probably don't want to use sessions for things like chat messages but you probably could use some type of implementation of queueing using MSMQ.
The approach to chat could be done in many different ways, this is just a suggesting off the top of my head.
Could do a messaging solution in Java Servlets using the application context. Objects stored as attributes in the application context are visible from anywhere in your webapp.
Update: Chat like functionality... I guess that would be AJAX polling your message structure stored in the app context unless you want to use something like applets.
Don't know if it's any good, but there's a chat servlet here that might be useful to use or learn from if you decide to go the Java route...
ASP.NET is "stateless" but it maintains state using Sessions. You can use them by default just using the Session[] keyword.
Look at ASP.NET Session State for some details from Microsoft.