Can you show me how to re render Flatlist on refresh? I use SQLite database for my local database and I have two pages one for display all workers and one for create worker. How I re render automatically page for display all workers when I create new Worker (live reload/refresh)?
Depending on the requirements of your application, the most easiest solution would be to use the get method you're using to pull data from your application as soon as the user presses the create worker button and update your data array in your state or props (preferably props). React Native will always re-render if it detects a change within the state or props.
One issue with the above method is, it will refresh for the current user, but imagine a different user is using the app too, it won't live refresh for them unless they refresh the component themselves (this could be tabbing in and out of the page).
One work around would be to use Socket.io (https://socket.io/), to build a truly real-time application, Socket.io would allow you to listen for changes from all users and send an update request to all users which in turn should refresh their applications depending on the changes.
EDIT:
Add the below method to your WorkersView class, assuming it is different from your createWorker screen then the WorkersView screen will update every time a user enters the screen.
componentDidMount() {
this.props.navigation.addListener('willFocus', this.getAllWorkers);
}
Note: I would recommend using a storage system like Redux or AsyncStorage, then you can communicate information across all your screens more efficiently and effectively.
Related
I am working on a React application and use react-redux and redux-thunk for integration with redux for state management.
I want to display a modal whenever I add a new entity. The ideal solution from my point of view seems to be:
In the action creator where I add the entity, the redux state should be updated with the notification message if the operation was succesfull
The main component of the app (The App component) should somehow listen to the redux state, and whenever a notifications message appears it should render the modal with the message.
I do not have an idea on how to implement the second point (how to subscribe the main component to state change and react accordingly).
On another note, there might be a better alternative to implement the notification component so I will gladly listen to alternative solutions as my exposure to front end development and React is quite limited.
First thing is that you probably want to display a "Snackbar" component (Example from Material-ui), and not a dialog as you probably might have several entities created one after the other, and you don't want to flicker the dialogs to the user...
Regarding the redux store, I think you should have a specific part in your store to hold all the notifications (Array of notifications), And every time a message with new entity comes you add a notification to the array. And after some time (Say 5sec) you remove the notification from the array.
In the ui, your component should listen to this part of the store, and just display the Snackbars one after the other.
I’m making a simple app with react-routing component.When user enter in /config path, it open a configuration page where he can choose element from select.
After this, user save data and the application set state of main component correctly (App.js). Then i make a “view change” using history to return in home (/ path).
The problem is : if user click on second time in /config routes, it lose all previous change made on DOM and it seems to be a new istance.
How i can preserve user interaction after first change? I cannot understand if i need to make a state inside this (Config.js) or there are an alternative solution.
Thanks for all
If you have an app level configuration which should be preserved between renders/navigation you should consider using some sort of a state management like Redux or you should store your config inside sessionStorage/localStorage (sessionStorage keeps track only while your browser tab is active = not closed. localStorage saves for the future when user closes and reopens your app).
Learn more about Web Storage API on how to use sessionStorage and localStorage.
NOTE: When you navigate away from your component, it gets unmounted which means that the component's state is destroyed/trashed. That's probably the situation you're facing now with your project.
You need to store the data/state/config somewhere. If it's just a few things (nothing heavy or complex), you can use localStorage (it saves the data between sessions, doesn't matter if you close tab and open it again)... But if you need to have a greater control over the app's state you should consider diving into Redux Store.
Have in mind that by default redux doesn't support data persistence so you'll need to plug-in Redux Persist package to achieve that (it's like saving in localStorage, but now the whole Redux (with all the states) will be saved between sessions)
I am not sure what you mean by
lose all previous change made on DOM
Where do you store these changes made and could you not check for this state and render the contents of the /config component or even the component itself depending on whether or not the changes to the state have been made?
I wanted the list of users to always be in sync with the MongoDB database,
I created an action that dispatches a refresh call to refresh the list of users.
What I have right now is an interval that dispatches the refresh call to refresh the list every 1 second, but I think it's a little hack to do that.
Is there a better way to refresh my list and re-render them through my React views?
What you are doing right now is okay but is expensive, specially if your browser tab is not active (please note that setInterval/setTimeout get less priority by browser if the tab is inactive or minimized).
You might need to explore using RxJS which has the capability to create periodic caller functions and you can subscribe to it in your react view.
Example - https://www.learnrxjs.io/operators/creation/interval.html
I want to fetch all the data needed to display the dashboard of my app in react-native. The app is similar to the facebook one
I am using react-native, redux, redux-saga, react-navigation and a REST api.
I have to fetch the post list to display the main page and the notification count for the headerBar. The other tabs pages are mounted at the same time as the main one to allow fluid transition. So I need the current user too for the Account page
Finally, the store is persisted and the app can stay in background mode for a long time. So I need to refresh my data often to be sure to have the last changes.
I have sagas which make the call and launch actions to update the store.
Here the strategies I found :
I can connect each page component and give them a fetchAllPageData() which dispatch a fetch action that I call in componentDidMount
I can connect smaller components to allow them to pull the data they need with the same strategy (ie. fetchUser to the component that display the user in the Account Page, fetchNotificationCount to the component that display the number of notifications ...)
I can use create a redux-middleware which listen for page change and call all fetch data actions.
I am currently using a mix of the first and second solutions but I am not very happy with it :
I don't always know where the data are fetched
The strategies which refresh the data once the component is mounted are a bit "hacky" and random
I often have the to move where the call is done when refactoring
What is the state of the art on this subject? What is your recommendation?
The usual recommendation is to intercept actions that make AJAX requests in the middleware and resolve them there before passing the result through.
This article explains it in more depth.
You can / should do in componentDidMount or componentWillMount.
I'm pretty new to React and Redux and I've been setting my environment in the past week.
I was wondering if their was such a thing as a refresh button that doesn't refresh the whole page but just the components containing the props that have changed in the store.
Example :
User_1 changes the store.
User_2 clicks a refresh button on his page (container).
The components containing props that have been modified are refreshed for User_2.
The perfect situation would be if User_2's interface components would refresh as soon as User_2 does the action, but I don't think it's possible yet. (If it is, please mention it)
Thanks in advance
UPDATE:
If you use GraphQl, it's worth looking into their "subscription" solution.
If your two user's are on different computers, then the store is not shared between them. Changes made to one user's store are not going to impact the store of a second user.
It sounds like what you really want is websockets. But this would be something you need to manage with the server-side of your application first, and which react/redux would merely consume.
In general, components will always instantly update when their props change. If a component didn't update, then it's props are still the same.