Problem Image
Problem Statement
I have a situation like in image I have a layout with 'Save all' Button, this layout component has many component (direct or deep in hierarchy). All component has a method to save its local state data to server and each component has different form component.
What is best pattern with react redux to call save of each component on click of save all, and is there a way to disable save all if no component has any change ?
Looking for help in React/ Redux scenario , is there some pattern like Command Pattern to handle these scenarios ?
Related
As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.
The only suggestion is to use redux. Im sure its possible to achieve this somehow using only context but I dont know how?
Im creating a popup that will be shown to the user after login. He should select an option that will be shared in all components as prop. Everytime this popup is open and the value change, all the component should be updated. Do you have any tips on how I should do it. Thanks
The best way would be using redux or context to have global state that can be shared with all of your components. I do not know your app volume and component numbers but if you are looking for a basic way for basic app, you can set this popup states in parent component of your app and pass this state as props to your children components. Another way would be implementing this with backend that you can do post request each time when you change your popup data and do get request in your children components
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.
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
When i am correct in flux there are 2 different kinds of state
Application State (in Stores)
View State (in the Component)
i am trying to build a CRUD application using flux and don't understand what's the smartest way to deal with action state.
consider i've a page with 2 components that are responsible for creating a blogpost. so a editor could choose if the want to use component1 or component2 to create the blogpost.
by pressing on the save button on component1 the component is sending an BLOGPOST_CREATE_ACTION.
In the component i want to display the lifecycle of the action:
Sending blogpost to the server
Blogpost is saved or saving failed
The store can keep track of these states and can emit when it changes.
But as i've 2 different components looking at the same store, the state change would take effect on both of my components.
Flux is build for keeping everything consistent, but in this case i want to get status (including error) informations independent for every component.
How do you deal with such "issues"?