I have a web application with the following flow:
You are in Investments screen, when rendering it makes an API request to some server and then the response comes as an array of investment objects. Then those objects are displayed as a List in the screen. The user is able to clic on one item of the list to get redirected to the Investment Details screen. The investment details screen has two components who need the information of the current investment to display some charts.
The redirect is handled by react-router using the ID of the investment as a URL parameter.
I was wondering which way could be the best to using the information of the current investment.
I mean. I can redirect the user from Investments to Investment Details and then use the URL param to make a request to the API to get the information related to that investment and then pass it down to the child components, or pass directly the information of the investment selected by the user from Investment to Investment Details as props and the same from Investment Details to its child components.
Am I getting into prop drilling?
Is another call to the API unnecessary in this case?
Thanks in advance.
You got to use both the approaches together for different reasons:
Passing the data already available to next pages. This can be done using state management library most popular one being Redux. This saves you from making another xhr request unnecessarily. Also the data is readily available to your user and the chances of user sticking to your product is much higher when there is no delay is transitioning between screens.
Now assuming you are on the Investment detail page; the data we stored in redux on page 1 will be available as long as user stays in the same app and does not refreshes the page as doing so will reset the store to the initial state. You could persist it in local storage but that's your call based on how sensitive the data is and how big is it. If you decide not to store the data, then you could fetch the data for only that particular investment based on the ID available in URL.
Related
I'm fairly new to web development and I am trying to build a fashion ecommerce site for a project.
I would like a user to be able to chose a product e.g a dress which has associated details like product name, product price, image and size in a page called product.html. I have been able using a separate javascript, to ensure that when a user presses 'add to cart' that the details are logged.
However, how do I then transfer these details to a separate basket.html page and display them?
I'm struggling to understand if I need to use local storage and if so how do I show the details if I'm using a separate javascript file and a another html file.
Essentially, if a user picks a product, how do I get that specific product and details to appear in my separate basket page?
Apologies if this is badly worded or made little sense !
Thank you :)
There are several options to this, depending on how your ecommerce site is built and what parts you have control over.
You could
Submit it to a server and have it respected in the response of the next page.
Hold it locally using webstorage (localStorage or sessionStorage). Keep in mind, that 3rd-party-scripts on your website will be able to read it, too!
Share it with a server by setting a cookie (can be read by 3rd-party-scripts). Keep in mind the limited size of a cookie.
Pass the information along as query parameters. This can have affects on SEO (duplicated content because similiar pages are indexed by a search engine).
Pass information along as hash parameter. Those aren't transmitted to a server, but can be read from JavaScript (yours and 3rd party). It was a hack applied in the early days of Single Page Applications.
You can build REST API which will be used to
store item into cart (called when pressed Add to cart button)
read items from cart (called on Basket page)
The API will persist it in some sort of DB and return when needed.
REST API should be secured (e.g. by OAuth2) so you can distinguish actions for individual users.
We are in the middle of migrating a fairly complex web app over to a React/Redux architecture.
One major design question i have not been able to find an answer for, is how is data stored in redux supposed to be 'refreshed'?
For example, say i load a list of items at a route like /items. Now the user wants to view a specific item and goes to /items/<id>.
The flow, as i understand should work something like, on the /items request, we make a API request and store all our items in the redux store. When a user clicks on a specific item, we pick out that specific item from our redux store, not needing to make a new API request as we already have the data.
This is all fine & well. But the question then, is what is the correct pattern for 'invalidating' this data?
Say, the user loads the list of items and walks away from there computer for a few hours. Now the list of items is theoretically out of date with the server.
How does one then, go about keeping the store up to date with the server?
You could use one of the following:
1) short polling (i.e. polling your server once in a while and update the store items)
2) long polling (you open connection, keep it until the data on the server changes, the server then sends you the new data and closes the connection, you reopen it etc...)
3) live updates with websockets, which provide bidirectional communication (this means the server can push data to the client)
Is it when the state changes, react will automatically rerender the component, this might not what you want, but what do you mean by the correct pattern for 'invalidating' this data? like 30 minute it will dispatch an action checkout the state change?
I have a languages table in my database.
If the admin wants to add a new transport (which has to be translated), I fetch those languages from the database, loop through them, then let the admin fill the form n times where n = number of languages in the database.
My friend says to use Vuex store so whenever an app launches it fetches languages and saves them in the Vuex store. Then, when an admin changes the route and goes to adding clothes (which need to be translated too), the app doesn't make the call again to show the admin n-th time fillable form.
When the app is launched, let's say we saved 3 languages in the Vuex store and the admin spends 10 minutes on the same page. When they change the page and decide to add clothes, what if in this 10 minutes another admin added a new language?
When the admin changes the route they will get 3 languages and not 4. He says it's good because no need to create a database call, also all the code will be in store at one place (fetching languages, adding languages, editing languages).
How does Vuex handle this scenario where the admin won't see all of the languages?
Vuex can handle this scenario just fine; it is an app state and data management tool constructed to handle frequent, or not-so-frequent, updates. You are right that Vuex data can fall out of sync with remote data that it is supposed to represent, but it is your job to decide if you want the admin to have, essentially, a live representation of the database, which requires frequent API calls to check for any updates.
I am building an Angular Web application that processes the payments. (Angular JS 1.x)
I have built backend API to process the payment after Final Confirmation State.
There are total 3 States in Application.
State1: User selects due invoices.
State2: User provides Payment Information (Credit Card Information)
State3: Summary and Confirmation.
A user can go back or refresh the page anytime.
I am persisting selected invoices by storing them in local storage so they remain selected on page refresh or state changes.
I want to persist the Payment(Credit Card) Information Securely once user enters them on state2.
So it remains there even user refresh the page.
I see two secure ways here:
Storing payment(credit card) Information in service/factory object/variable: But this won't persist information while refreshing the page.
Storing payment(Credit Card) Information in cookies: But I don't think this is the secure way to do so.
Normally I prefer to store this kind of information in session but here in angular front end I am not able to do so.
Is there any better or proper way in Angular Web application to persist payment(credit card) Information securely.
If the data needs to remain even through a browser refresh, then you have two possibilities. Either you send it up to a server and store it there or save it in the browser local storage.
We had a silverlight application that maintained state when clicked on links and come back to it.
I was wondering if there's a way to implement something like that using Asp.net MVC? Basically right now user goes to a search page using a link in the banner, in the search page we display some items.. user clicks on one of them and another page opens up taking him to the main page that list that items information. From there the user can again click on search but this time of course a new search window opens up.
Am wondering if there is a way to load existing content form the already opened window into the new search window?
If it makes any difference the search page is ajax enabled.
As Shyju has pointed out, Http is stateless. There are several ways to store and share data between multiple pages in web applications.
Just to name a few, you can use:
Cookies (do not save security sensitive data such as passwords in
cookies)
Sessions
Browser's local storage (http://www.w3schools.com/html/html5_webstorage.asp)
In MVC, you can use ViewBag, ViewData or TempData
You can pass data as query parameters in URL
You do not want to maintain the state in ASP.Net MVC. It is a bad practice.
If you want to pass state between action methods, you can use TempData.
It uses Session State under the hood, and clear it automatically right after you retrieve the data.
ASP.Net offers some addition methods in addition to TempData. You can read more here. In your scenario, TempData is a best choice.
As we all know, HTTP is a stateless protocol, each HTTP request does not know about the previous request.
ASP.NET also provides state management techniques that can help us to maintain data when redirecting from one page to another. There are several ways.
Hidden Fields (is used to hide your data on client side. It is not directly visible to the user on UI but we can see the value in the page source).
Cookies (are used for storing the data but that data should be small. It is like a small text file where we can store our data, This are stored on client side memory in the browser).
Query String (generally used to pass value from one page to the next).
View Data (helps us to maintain the data when sending the data from controller to view. It is the dictionary of objects derived form ViewDictionary).
View Bag (same as View data, except the only difference is that view bag is the object of dynamic property).
Temp Data (is also a dictionary object as ViewData and stores value in key/value pair. It is derived from TempDataDictionary. It is mainly used to transfer the data from one controller to another controller).