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
Related
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 ?
I have splitted my page into few components and I need to force the other components to refresh their contents on the screen whenever a change happens in one of them.
It is possible to force parent and child components in react js to refresh each other but I wonder how I can handle this scenario when the components are not parent and child .
I know one way is to merge all of them in a single component and handle that but it makes source un-modular.
I have googled this and all the posts are about parent and child components.
Any recommendation would be appreciated.
You should use some form of state management solution, be it redux or the React Context API.
This is the only scalable solution to updating multiple components that are not directly hierarchical.
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'm fairly new to React, and I was trying to create an app that functioned thusly:
The app consists of several Pages, with multiple Components on each Page.
One of these Components is stats, which can change as the user interacts with Components on the Page.
When a user clicks on a certain Component, they will be taken to a "different" page, which is really just another Page, with different text, data, etc. This is carried out through the browserHistory.push() method. I would like to be able to carry over the changed 'stats' component from one Page to the next, but I am not sure how to do so. Furthermore, since I set the default value for stats in the Page component, it seems that any attempt at passing the changed values into the new Page would result in the new values being overridden. Can anyone help me?
Thanks.
State should live above the level of all components that need access to that state.
Remember that one of the principles of React is "one-way" data flow down the component hierarchy. Essentially, data/state should live at a high level, getting passed down to child components and consumed as needed.
In your case, you have some "stats" data that needs to be displayed across multiple Pages. So, "stats" needs to be owned by a component above all of your Page components - perhaps at the root component of the app itself. Pages themselves would just take the data in and render it, potentially with some callbacks appropriate for editing the data.
Read a bit more about Facebook's philosophy for React in "Thinking in React" in the official docs: https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
One option to consider is to use React Redux to store the state of your application. You would then use mapStateToProps (See Redux API for details) to map the state into props for your stats component.
I am new in react and redux. I have a button on a component on click of that I am calling api and set the response as state. But I want that state back to clicked function where on base of that state I want some conditional work.
I dont think how to implement this.
Thanks,
Vijay
You need to use Connect.
Connects a React component to a Redux store.
It does not modify the component class passed to it.
Instead, it returns a new, connected component class, for you to use.
You need to use mapDispatchToProps so that your data is back to you at the component once fetched/retrieved making the component re-rendered, and that's what you need and that's the killing feature of Redux uni-directional flow archticeture.