I start with reactjs using reduxjs and react-router-dom
I have some route like main/route-1, main/route-2 ... And i want to call some api to get data in each router when user access or refresh. have any way to hanlder access router url to call special api with that router ? what best way to do that thank.
I don't know any way that you cant call API through the router. But you can call API when component loading. use axios to call the API inside the componentWillMount() function.
Edit: After I look again in documantation they mentioned that componentWillMount method is considered as legacy and don't use it. So you cant use componentDidMount it will call API immediately after the component mount. Their documentation also said that the componentDidMount is a good place for instantiating the network request.
Related
Simply,
I just wanted to Know when should I call the API in redux actions using redux-thunk and when should I directly call it in react Component ( in Constructor or ComponentDidMount ),
It would be really helpful to know which to use when and
Thank You For Contributing to StackOverflow.
Use Redux
When you want your API Response to be used across multiple parts of your application .
Use ComponentDidMount
when the API response is specific only to that component and its not needed to be shared across the application .
First of all: I know that this question has already been asked here and that there is also already a solution. Please read the whole post before marking this as a duplicate
I am using the HashRouter from react-router-dom and I have this simple route:
<Route path='/folder/:folderId' component={FileArea} />
The routing works fine but unfortunately my componentDidMount function is not being called after a route change. This is crutial for my application to work as I have to make an API Call every time the route changes to retrieve the corresponding data (according to the folderId url parameter).
I found a solution in the internet using componentWillReceiveProps and this would work fine for me but apparently this function will no longer work in future react versions: React Documentation
I also know that I could theoretically use static getDerivedStateFromProps(nextProps, prevState) but this function is called way to often and it would be rediculous to make an api call each time.
Is there an alternative for componentWillReceiveProps or some way to invoke componentDidMount?
you can use componentDidUpdate() life cycle hooks.
and to get the route data in your component use this.props.match.params.folderId in that method
and to stop continuous call add if condition it will only call whenever route change.
I hope it will work!!
We're building an application where we need to store some data in localStorage before componentDidMount is invoked. Is there a way of doing this? It's to store some settings required for various API calls.
According to the docs, your React component's lifecycle will happen in this order. While you could trigger the save to localStorage in in the constructor, or in getDerivedStateFromProps, it sounds like you might want to wait to make the API calls that are being made in componentDidMount until later. You could set up your chain of logic to only fire the API call once localStorage has been written to successfully?
I'm learning ReactJS currently and I've seen and read that you should use componentDidMount and componentDidUpdate but I don't Understand why should I use it when the side effect is connected to the view.
For an example, I have a submit button in a sign in page, when should I send the api the sign in data? in componentDidMount? or onSubmitHandler?
You should call your api in onSubmitHandler and call it as per your use case.
As for the the componentDidMount, it is generally used to call those methods which are required when a component is mounted.
You can read about lifecycle methods here
I'm not sure the context where some one told you "you should use componentDidMount", but your submit button should call a function you define like "onSubmitHandler".
componentDidMount and componentDidUpdate are called lifecycle methods and you should read about them before deciding if you should use them, and what you should use them for.
As mentioned in the other answers it completely depends upon the use cases, you can call your API in componentDidMount or in onSubmitHandler.
Some common use cases:
When I want to call an API after my view rendered then I will use ComponentDidMount to simply call the API. I will not wait for any click event from user.
If someone told you "you should use componentDidMount", then they are probably talking about this use case. Why call API in ComponentDidMount
If there is a submit button on my page and I want to call API when someone clicks on that then I will use onClick event. I can't call API in ComponentDidMount in that case
There is an awesome article about the lifecycles React 16 Lifecycle Methods: How and when to use them
Which is better?
I tried onEnter but that lead to flickering between paths. The onEnter check ran before the component was loaded. It routed and then re-routed after user was authenticated which was visually unpleasing. Now I'm just using Main component's componentWillMount lifecycle to run the authorization code and re-route if is resolved else stay there. If I use only lifecycle method to check then I can't use Link component from react-router. Any thoughts on how to solve the flickering or improve the client side security without crappy ui.
First of all you should do it in the componentDidMount and not on the componentWillMount since it can freeze the entire application if the process takes some time.
As for your problem, you can do the check in tje componentDidMount and then use react router's browserHistory to manually push the url.
Take a look at the histories docs of react router:
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md