No need for state in React components if using Redux and React-Redux?

13
votes

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?

1
javascriptreactjsreduxreact-redux
Yes. Whether you should or not requires more discussion and specifics about your app. It's always nice to have a single source of truth though. – azium
Still when you want to stick to React only, but are searching for a more lightweight approach to handle component state, you could add a state management library like MobX (mobxjs.github.io/mobx). It can help you with the internal component state (medium.com/@mweststrate/…) but also store the state outside of your component. – Robin Wieruch

1 Answers

8
votes

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":