I creating a SPA with React + Redux, where I am using react-route.
I am facing one issue that whenever I am switching my routes like /about, /contact, /list.. each time components gets unmount.
So, I would need to know that is this a expected behavior or I am doing something wrong. Because in some component I am making an ajax call to get data and if component gets unmounted and user comes back again... it makes ajax call again even if data is already available in store.
<Route path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="about" component={About} />
<Route path="/" component={HomePage} />
</Route>
Each time you navigate to a route the old component is removed, the new component is loaded and gets populated with the store values (with redux's connect).
The data will always be available in the store, so you dont need to fire new ajax requests when a component unload and reload again.
And, if you still want components to be available all the time, then you can use a single route and show and hide components from your main component using a navigation menu or tabs.. but depending on the number of components the DOM can get pretty heavy.
Related
I implemented a simple crud application in two ways.
One with Laravel and Vue and one with Laravel, Vue and Inertia.
When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication
When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.
Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.
Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?
I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12
Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.
I have page that has v-tabs using the nuxt attribute, each tab directs to a dynamic route
cars/_brand_name/index.vue (making the _brand_name a mandatory parameter)
When I load the page /cars/bmw: mounted get's called successfully but after switching to other tabs the URL updates correctly but the page no longer re-renders, mounted no longer getting called.
Am I missing some part of the lifecycle? Should I be watching the route param and force the page to reload? I don't remember needing to do this with Vue alone.
This is often caused when the route component is the same as previous route. The best way to force Vue to re-render the page is to set a :key attribute on the router with a unique value, it is common to use $route.fullPath.
Update your router view like so.
<router-view :key="$route.fullPath"></router-view>
I've got a component that downloads data from an API. When the user clicks Search, the content from the API is fetched via AJAX. This content from the API is in JSON and has got an ID of the product inside. I am able to create new HTML elements based on this content and put them inside my site, but I would like every created on the fly element to have routerLink="/detailsPage/itemID" working, so that after clicking it would route to detailsPage with apropriate ID. How to do it in the most simple way? I assume some recompiling of refreshing is needed.
The answer to this question is HTTPClient - Angular offers it as an easier way to use XMLHttpRequest (AJAX) in Angular applications, and using it also makes sure that routerLink or any other Angular directives will work on objects created dynamically with this method.
Angular - HTTPClient
Is it possible to send data through Component in react js.
I have a react component: On load of this component I have an api call and get a response, on this component I have this
Go to Next Page
On this Next page load I need some data from response of my previous component - how do I send it? is there a way to do this in react?
If you are using any kind of state management framework such as redux or flux, you can set the data in the store once the api call is fullfilled (on your first page, ie the one with the Go to next page link). Now on the next Page, you will have the data you need in the store which you can retrieve and do whatever you want with.
I am adding some functionality to an existing Microsoft MVC 3 application. I cannot change the existing structure of the app itself while I do need to add some new functionality to the page. I have angular running in a div (hidden on load via jquery dialog). The MVC app has several tabs on the page. Each time a tab is chosen, the a partial cshtml (razor) loads. Along with that partial, my angular template is included. The partial references a js file that contains the angular controller. When it is first loaded and the user opens the tab and open the jquery dialog containing angular, everything works fine. I started to notice some funny behavior after the changes are saved. I noticed the same irregular behavior if I closed the dialog containing the angular template, switched to another tab, then switched back to the tab containing the angular template. Here's what is happening:
The partial being loaded by MVC reloads the angular template which initiates the angularjs controller method in the referenced js file
A new $scope is being generated each time this occurs.
Each time a controller method is invoked (via ng-click event tied to a button on the template) teh method will execute n number of times with n being the number of times the partial has been loaded since the last full page refresh.
I proved this method by logging the $scope object to the window in the start of the controller method
window['scope_' + new Date().getTime().toString()] = $scope;
After each partial page load, a new $scope object is logged to the window. Pressing a button on the template invoked a certain method tied to the ng-click event. This event fires multiple times. But calling the method manually in the console using the oldest recorded scope object in the window
scope_1378413848781.$apply(scope_1378413848781.getSomeData())
it works as intended. So, my question is, how do I prevent the controller from adding a new scope every time the MVC framework reloads the partial?
Here are some of the things I've tried that didn't work:
Adding a global flag and exiting the controller method if it was set
moving the controller reference to the _layout.cshtml file
destroying the scope when the dialog containing the template is closed
One final note, I am not using the angular route provider which I know can cause the controller to execute twice when used in conjunction with .
It appears that Angularjs was not meant to be used in this fashion. Per the angular docs:
You can use Angular to develop both single-page and round-trip apps, but Angular is designed primarily for developing single-page apps...You normally wouldn't want to load Angular with every page change, as would be the case with using Angular in a round-trip app.
To resolve the issue, I moved the angular template as well as the reference to the controller and angular.min.js to the shared _Layout.cshtml file. This partial file loads first and is only reloaded when the entire page is refreshed. Adding angular references and loading controllers in js files referenced in asp.net mvc 3 partials will cause scope replication that can be difficult to detect.