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.
Related
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.
I'm new to React, so forgive the newbie question.
I've got a plain ol' JS object that wraps a WebSocket and exposes state based on the messages it's received over the socket, e.g. the current set of messages in a chat. In Angular or Polymer (or WinForms and WPF), when new data comes in, I'd send a notification using a standard protocol to let data bound clients know that the state has changed and re-rendering would happen for those clients.
I'd do the same thing in this case by extending React.Component in my WS wrapper class, except that it's got no UI (it's just a cache of the state gleaned from the messages flowing over the WS), so it would return null from render and I'm not clear on whether it stays in the DOM or not at that point. Further, I'm not sure how to make UI from a parent or peer element of the WS wrapper object update as it's state changes.
What's the React way to have a data-only component? I'm trying to get my head around React before I dive into Redux, so hopefully the answer here doesn't require picking up a Flux implementation.
Thanks!
Sounds like the wrapper JS object should be the App "global" state. Regardless of where you contain it in React (a top-level component with vanilla React, or a store in Redux).
Assuming that you put it as the state of a top-level component, then when new data comes in, all you need to do is setState(newData)
All UI driven by this data should be described within that top-level component that holds the state. All children components can be read-only.
When the top-level component changes its state, all children will be re-rendered with new read-only props.
I am converting a jsp multi-page app(mpa) into a React single-page app (spa). In the mpa, the back button worked and the form retained its state.
In my new React app, the back button works but the form does not retain its state.
Question: is there a trick to make my form retain its state after "backing" to it (in an spa).
Here are the two solutions I came up with:
Encode the entire form state into the url. Then update the browser history with an updated url every time the form changes. But, this seems like a huge pain in the butt.
Modify the structure of my app such that the form in question (a React Component) stays mounted (and just use the css visibility or display property to show and hide). But, in a large app, leaving every page mounted in the DOM seems like it might lead to performance problems.
By the way, I am using popstate and the browser history api to achieve SPA behavior (i.e. i have rolled my own router) as described here.
Hopefully someone can propose a solution that is better than my two solutions. Thanks.
I ended up using something similar to Wylie Кулик's answer with a few changes:
I didn't want to switch to Redux for just this one use-case. So I used the component state of my top-level component (i.e. a component higher up the tree).
I cached the form's state on the form component's componentWillUnmount and restored the cached state on componentDidMount.
I passed the cached state as a prop from the higher component to the child component.
It ended up being a very small amount of code and is working like a charm so far.
Use Redux to have a state store which transcends any particular component. Then in your component, as part of the form submission process, dispatch an action with payload of all of the form data. This should be cached on state and then when the component is remounted by your navigation structure, it should have access to this cache via Reduxsconnectfunctions mapStateToProps method. You can repopulate your form from that.
It's not clear from your question whether or not you are submitting the form in the traditional old way. I would use e.preventDefault in the handler instead, and have all the form data on the component's state, this can be sent to Redux's state store as described above, and Ajaxed off with superagent or similar. At the same time it can be cached.
Redux: http://redux.js.org
I'm developing a web app with React + Flux. But sometimes, I am confused about where to put the data of a component.
Flux says that we should keep the data in the store. When the data changed, store should emit a change event, then the react components which listen to the store's change event should call setState with the data in the store.
But in this way, one react component is made by two parts, which are the component it self, and the store to be listened. Sometimes I want the component to be more individual. I don't want some state of this component to be related to any store, so I store the state in the component jsx file. In this way it is not a flux style, but just react.
I'm not sure if I'm doing the right thing. Should a fluxible app to be totally obey the flux or not?
There is no right answer to this question.
You could differentiate between application state and view state just as much as you could reason that all state should live in one global store.
Application state could be User information, product information or that type of data whereas view state could be related to toggling a div or what color a link should have depending on the application state.
These two approaches are both used in the wild and there is just a matter of preference.
This is a good read that argues for the case of a single state.
I won't link to the other reasoning as it's the "flux way" and an easy Google
I have been creating a React calendar. At first I just wanted to declare the calendar in the html with the appointments, like this:
<Calendar appts={appts} />
But then I realized that my calendar was going to have to be a full app, talking to the REST endpoints and have it's own store and actions.
The calendar was not the end goal, and now I need it to be part of a bigger 'Flux' app. How is everyone architecting their apps, so that the pieces can be reused, say the calendar, in other apps? How do the different Flux apps talk to each other? Are there any examples or blog posts where this is talked about?
Flux is an publisher-subscriber architecture recommendation from Facebook. RefluxJS is an easy to use implementation of this architecture. It adds actions and stores to ReactJS.
Actions are triggers for change. Whenever the user interacts with the page you call an action. Actions have almost completely replaced setState inside a React component for me. When a user creates an event such as a form field change, I fire an action with the event data as a function parameter. In this architecture, actions allow React components (classes) to broadcast publish changes.
Stores subscribe (listen) to actions. The simplest store simply passes on parameters that have changed with a this.trigger call. Other stores may listen to other stores, validate data, stuff parameters into data, set data into an object, or push data onto an array than broadcast the new dataset with a this.trigger call.
React components (classes) and stores can subscribe (listen) to stores. When these stores update, you can
Update state and all dependent props
Do something with the updated store dataset
Reflux comes with a very useful connect mixin which allows you to link the state of a class to a store. Be careful though, be sure to implement getInitialState in the store if you do this. Otherwise, your class will start with a null state. Another useful mixin is the ListenerMixin if you just want the component to do something when a store changes.
For more information, be sure to checkout the RefluxJS README.