Menu
Managing state with React only
I understand that if you're creating an application using React only, you will end up managing all of your state within different React components you create.
Managing state with React and Redux
If you decide to use Redux in combination with React, you can then move all of the state from each of your React components into the overall Redux application state. Each component that requires a slice of the Redux application state can then hook into the state via React-Redux's connect function.
Question
Does this mean that you no longer need to write any React components that deal with React's state (i.e. this.setState) since React-Redux is connecting the React components with Redux state by passing data into the container component as props?
466
Although Redux and React are commonly used together, they are independent of each other.
It is totally fine to use a mix of React component state and Redux state. You might for example use non-critical UI state inside React components, like if a checkbox is checked or not. The official Redux FAQ has a good list of rules of thumb for determining what kind of data should put into Redux.
Based on those rules of thumb, most form state doesn't need to go into Redux, as it's probably not being shared between components. However, that decision is always going to be specific to you and your application.
Reactjs global state without redux: React state management with context api. React js components can have access to shared data via context API. This article explains how to use the react context API to manage the application's global state without using complex libraries such as redux and prop drilling.
There are different opinions on this, but the general view seems to be that redux should only contain "application state". Individual react components like dropdowns or modals will still have their own state.
There is still a lot of debate on this though, check out this issue for example about how to manage local component state: https://github.com/reactjs/redux/issues/159
Some projects have been popping up that are trying to solve this "problem":
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
