I am trying to refresh a Resource's show view after completing a custom action on admin-on-rest lib.
But I don't see any API to do that.
If I click manually in the "Refresh" button, it works.
Is there a way to refresh the view programmatically?
In order to refresh the screen the state needs to be updated. The updated state can either be the local component state (via setState) or the state provided by the props (if using redux) needs to be updated. If you are using redux I would suggest raising an action that reloads the data from the server into the store.
You can call this.forceUpdate() function to refresh the component programmatically.
Src: React-Docs
Use the refresh redux action which is exported from admin-on-rest. If you have a custom saga which handle your action, just dispatch the refresh action after you're done
Related
I have an axios call that is attached to a notation log component. When a new notation is submitted, it updates the MySQL database, but I can't find a way to get the 'notation log' component to update. I may be looking at the problem wrong. I have it working where the enduser can click on a 🔃 refresh button by forcing the url to redirect to the same page.
You could force an update to re-render the component, but Vue should handle that for you. If you submit the data into the database, the backend could return an updated list for example. Or you just send another GET-request when receiving the answer of your submitting-request and then set properties of your component.
For forcing a re-render, check out this article: https://michaelnthiessen.com/force-re-render/
I'm passing previously fetched data, through location.state to subsequent components. That works fine, however, if the user hits refresh my history, and location state objects are wiped out. I can see that this is the intended functionality. My question is, am I supposed to be using redux to keep this data persisting? If that's the case, I lose a lot of the benefits of react-router in my opinion. How are people handling state when using react-router?
You can pass the states as props, or save it in localStorage for a wider access.
To be able to persist the data, you should store your data on database or localstorage for an example. And when you refresh the page, you can fetch your data from the store.
If your component is class base component you can use componentDidMount for fetching the data and set the state or redux.
If your component is functional component you can use useEffect for the same scenario.( react version should be greater than 16.8)
https://reactjs.org/docs/react-component.html#componentdidmount
https://reactjs.org/docs/hooks-effect.html
Data can be stored locally on the browser with the localStorage() function. The data can also be sent to the next component by using the this.props.history.push function.
In the end, I chose to save the data in the browser's local storage as I wanted to pass and access the data in a child react component and being able to refresh the page. By saving the data in the local storage the data stay whereas any using the history.push() functionality to pass the data, the data is deleted after hitting the refresh button.
Below there is an example in case you want to pass the content of the pseudo variable in the child component.
localStorage.setItem('pseudo', this.state.pseudo)
OR
this.props.history.push({
pathname: '/NextPage',
data: { pseudo: this.state.pseudo }
});
To get the data in the child component NextPage.js you can use the following code:
props.location.data.pseudo
OR
localStorage.getItem("pseudo")
React-router isn't concerned with state management. To manage state, use Redux or other solutions like Xstate. To persist data on the client you may look at localStorage
I have some problem with react.
I need reload page and refetch data after change language without window.location.
I use react, redux, react-router-dom, react-i18next and more
I don't want to use componentWillReceiveProps and check
if my params en has changed to (uk or ru) and then call method for trigger redux action and make some request.
Does someone have an idea?
I'm looking to initiate an action everytime a user arrives on a specific view. How can I do that?
None of componentDidMount or componentWillMount work and if I insert the action inside the render method it goes into an infinite loop.
Here is the action I'm trying to call every time a user arrives on the Conversations.js view:
this.props.conversationFetch()
You will need to use a combination of componentDidMount and the AppState api.
Using the AppState api, you can be notified when the app state changes, so listen to this from your component and run conversationFetch() when the state becomes active. That will solve the question from your comment about a user getting to the view by unlocking their phone etc.
I have a, hopefully, simple question. I've built a small App with Ionic and AngularJS. There are two States, one of them is a tab containing a form. When submitted the form tab shouldn't be accessible anymore. I've tried to write a boolean variable in local storage and it works fine for me. Unfortunately when I submit the form I can still push the back button of ionic or the android hardwarebutton to go back to the form and submit again. I called a function via ng-init that switches the state before loading but this only works with refreshing the page, not at the state change.
How can I listen to a state change? Do you have a better solution?
It's quite easy actually, UI-router give you access to 3 differents state listener :
$rootScope.$on('$stateChangeStart',myFunc) -> fires when state is changing
$rootScope.$on('$stateChangeSuccess', myFunc) -> fires when state has changed successfully
$rootScope.$on('$stateChangeError', myFunc) -> fires when state change has failed
Then you can disallow the access to one page using the resolve attribute of your state by associating it to a promise. see doc
If the promise is resolved, access is granted else access is denied.