I have a react contain that makes an ajax request via #asynConnect. Once that data comes back from the server, this component's render method will conditionally render several components. Some of these components have their own data that is required to render their content. What is the best way to fetch the data for each child component? Do I use componentWillMount? Should my parent container dispatch another action that when received will make the subsequent ajax calls? Should I use some type of middleware (redux-thunk)? I've read multiple posts and comments on this topic and still not sure if I've come across a "best practice". FWIW I'm using this project: https://github.com/erikras/react-redux-universal-hot-example
Related
I know how this.$forceUpdate() work and not trying to just re-render the component.
In Nuxt apps, page components have asyncData() as their lifecycle methods, executed before created(). I'm using it to fetch some initial data and SSR them.
The reason I want to reload the component is to fetch the data again after modifying the corresponding data inside the component, using AJAX. I've tried this.$forceUpdate() just in case but didn't work. this.$router.replace(this.$route.path) also didn't work. I'm trying to not use location.reload() since I have a toast message should be shown after the modification.
Is there any way to do this? Or should I move my fetching part to fetch() and call this.$fetch()?
this.$nuxt.reload() was the thing. Not sure if it exists in Vue itself.
I was curious to know if making an API request outside of the lifecycle/useEffect is a valid way to make the call?
https://stackblitz.com/edit/react-useeffect-button has two functional components, the parent component makes an API call and passes the data to the child component, initially specified the limit of data to be fetched from the endpoint as 2 and the parent component has a LoadMore function that is passed as a prop along with the data to the child component.
Using the react-slick slider to display the images in the child component and the Load button onClick will call the function LoadMore inside the parent component and then it makes an API call and appends the new data from API to the old Data. The load button will append one Image to the existing images.
is this a good way to make API requests or should it be done only in the lifecycle methods?
is this a good way to make API requests outside useEffect/lifecycle.?
It depends on your requirements.
should it be done only in the lifecycle methods?
It depends on your requirements.
There's nothing wrong making API request outside useEffect. But it should be done in some other function or it will cause the request to go on every re-render.
And if the response if being saved in a state variable.
Then it will go into the infinite loop.
When do we make the request in useEffect and when by some other function?
Requests that fetch data or send some info at the time of initialization of the component is supposed to be made in componentDidMount/useEffect
And requests that are supposed to be sent on some action (like in your case, onClick) so they are hit according to that event.
There's neither good or bad, it's all about your requirements.
If you are making an API call to get data from initial render then using a lifecycle hook is a good approach. In your scenario, you want to make an API request when hitting a button. In that case it can be a simple function without any lifecycle hook method.
The only key part here is that you are maintaining the state and rendering the view from the state.
This depends on your needs.
if you think whenever your params change,API call will be triggered.
in this case, you should set the API call inside the useEffect.
If you want your API call triggered on page load(ComponentDidMount). In this case, you should set API call inside the useEffect
Otherwise no need to set api call inside useEffect.
In your case no need to set API call inside useEffect. because you hit the API call when the user clicks the button. So no need to use useEffect.
This question already has answers here:
Where to place logic for loading initial server data in React app?
(2 answers)
Closed 5 years ago.
How do I do AJAX requests in React? React itself doesn’t have any allegiance to any particular way of fetching data. Which hook in react is best to fetch the data [constructor, componentdidmount] or have a custom hook [static method].
The place you should be calling you AJAX requests depends on your functionality,
If you need you AJAX call when the component is mounted or at repeated interval, you should call it within a componentDidMount function. An example could be fetching data a regular intervals from your server to update on screen.
If you want to send an AJAX request on an event, you should have it in your custom function. An example could be posting the input values to your backend api
In order to make AJAX calls, you can make use of axios, fetch npm packages
There is not any particular place of fetching AJAX request in React. It depends on your functionality mostly. Until now I've made AJAX calls inside of 'ComponentWillMount' method to make ready data asap.
Also, sometimes I've needed to fetch data from server after a component did mounted. So in that case, I had to use this workaround: React - setState() on unmounted component
The most important topic is here not blocking the rendering interface and to set properly the state, after getting data from server.
We are building our website with react/react-router/redux
We want to server side render our pages that should be filled by the data from our data sources. This transaction has to be asynchronous and unfortunately since we want to server side render, we can not use "componentDidMount" function.
In the redux tutorial page at server side rendering section here, it has been advised to :
If you use something like React Router, you might also want to express
your data fetching dependencies as static fetchData() methods on your
route handler components. They may return async actions, so that your
handleRender function can match the route to the route handler
component classes, dispatch fetchData() result for each of them, and
render only after the Promises have resolved. This way the specific
API calls required for different routes are colocated with the route
handler component definitions. You can also use the same technique on
the client side to prevent the router from switching the page until
its data has been loaded.
This is currently how we handle our data fetch. I personally did not like this approach it looks quite clumsy and it is too coupled to the routing library. Are there any better ways to do it - hopefully with standard react/router/redux components ?
Something like a static fetchData() method is the correct way to handle data fetching with React Router in the general case, though it can reach down into child components as needed (which is e.g. how Relay works).
The reason you want to do it this way is that React Router resolves all the matched routes all at once. Given that, you can then run data fetching for all of your route handlers simultaneously.
If instead you tied data fetching to instance-level handlers on components, you'd always end up with fetch waterfalls, where a component could not fetch its required data until all of its parents receive their required data, and so forth. While that may not be a big problem on the server, it's hugely suboptimal on the client.
If you really want to colocate data dependencies to components, you can consider using something like React Resolver, but this can easily lead to a suboptimal experience for your users.
An Ember Component needs to fetch data from serve, however i think put AJAX call inside the component is not a good practise.
Or use the Route to fetch data, then pass data to component.But the route's method can't share easily between different routes.
In general, you are right, it is not a good idea to put ajax calls in components. However, in a case where the data to be retrieved and displayed is intimately connected to the view--auto-completion could be one example--it should not be considered an anti-pattern.
If you think it is important to segregate the ajax call, you could consider using a {{render}} helper inside the component's template, and do the ajax work in a separate controller with an associated view where the results are displayed. Routes are not really relevant here because they are related to navigation and URLs.
A component should depend only on the input that are passed to it.
If component has some internal dependency (AJAX / Other data) for input it is an anti pattern.
Ember way will be
1) Create a Route : (Get data to you application)
Sometime you dont have a route for such data (like in your case). Here you can use application route or any other parent route if have. Use the setupController to inject this data to relevant controller
2) Pass down data to component
Now your data should be a controller. Pass this data like any other to required component
{{my-comp-here data="here" ajaxData=fromRoute }}