So i have a search field sitting in my header class and i want to pass the search value to the content which is sitting in another class so can anyone tell how to do that?
This is the purpose of redux and having a global state. You can check out a starter react redux project I built for more details. But basically you will need to dispatch actions which will update the global state from one class and then is accessible by all other components in your app.
https://github.com/iqbal125/modern-react-app-sample
Related
I am setting up a react project and following the feature based (Duck) folder structure.I have already setup component, action, reducer within a single feature but i am not able to understand how can I setup redux store and how can pass store to my component
I want to use Redux Toolkit, but have global state properties that are not specific to a particular feature, such as "loading" and "errors". These two properties are updated when I make API requests concerning multiple features in my app. Should I put them in their own e.g. API reducer? Thanks
It is always better to have separate loading, errors for each api call or each component reducer.
you can think this way, what component is visible to the user at that moment and you want to show loading till the data comes from backend.
You only keep any state global and share when it will be used in another component.
**Is it OK to Using a component state for just to handling form data, while the main data and other stuff of the application will be stored in the Redux store?
I don't want to use redux-form instead manually dispatch it to the reducers**
Redux comes into the picture when we want to manage the state across different component. It provides a centralize store where state of all the components are managed.
When talking about forms, in most cases form data is only limited to the component is which is being used. So, in that type of scenario there is no need to link them to centralized store using redux. A simple way is to store them in the component state and get it processed. Afterwards, you can store the output of that in redux store according to your needs.
It is okay to do that. You can keep a local state in the component. state = {} in class components, const [localState, setLocalState] = useState() for functional components.
Or you can use custom hooks for handling your local state needs. Check out useInput or useForm custom hooks that are developed by the community.
Yes of course. Some things go best in component state, some go best in a parent component, some go in Context, and some go in Redux. There is little use in putting everything in Redux, it just causes a lot of boilerplate and every component tries to update when the store changes.
You put things in Redux when different components that are at different places in the HTML tree use the same data, and it changes during the app's lifetime (things like the user's language don't change often and go in Context). You use it when you want to store your app's state to restore it later (which exact menus are currently open or closed is usually not that important) and when you want to keep track of state changing using the Redux dev tools.
How to create a global variable in react component,so that all the other react component can access that global variable and modify it,and for every new request the global variable data should not be lost.
I have tried
localStorage.setItem('key',value)
this is working fine. But problem is By using localstorage. when do logout and log in, into application the values are still exists.
I do not recommend using global variables in React. When you store something in a global variable and you can modify it from everywhere it is against the philosophy of React.
But you can use more option which is in line with React and can access it form plenty of places. And all of the option provides re rendering when the this global value change.
Store your data in the topmost component state and pass it to the child components via property.
Store your data in the topmost component state and use Context to access it from a deep down child component without passing the data in properties trough the component hierarchy.
Use redux. It is an overkill sometimes and has a steeper learning curve, but you can access the centralized redux data from every component and every level. (it uses Context too)
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.