Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Move component state to Redux store #1367

Closed
chuckharmston opened this issue Sep 16, 2016 · 3 comments
Closed

Move component state to Redux store #1367

chuckharmston opened this issue Sep 16, 2016 · 3 comments
Milestone

Comments

@chuckharmston
Copy link

chuckharmston commented Sep 16, 2016

In most cases, things you'd consider storing as component-level state may be helpful for other components to know. For example:

We currently store isInstalling on the install button's component. If this is stored in the Redux store, the email modal component would be able to monitor its value and pop up whenever it changes from false to true, rather than needing to be manually-triggered.

There's a lot of good discussion about this out there:

reduxjs/redux#1287
http://redux.js.org/docs/FAQ.html#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate

There is one important benefit to everything going into the Redux store: it turns your app into a finite state machine. The Redux store becomes the input, and the output is the rendered DOM. This makes some good things easy: testing complex interactions between components, time travel, bug reproduction, and testing.

For the sake of being consistent and explicit, I'd suggest implementing a guideline to not use component state, instead putting everything into the Redux store and passing values down as props.

@johngruen
Copy link
Contributor

we should do this at some point.

@chuckharmston
Copy link
Author

For a less contrived example of how this might be useful, see the addon.restart store bits in #1369.

@lmorchard lmorchard modified the milestones: TXP-37 React Next Steps, TXP-0: Code Quality, Bug Fixes, Technical Debt Oct 10, 2016
@ghost ghost removed this from the TXP-0: Code Quality, Bug Fixes, Technical Debt milestone Oct 10, 2016
@ghost ghost added status: ready and removed status: planned labels Feb 16, 2017
@fzzzy
Copy link
Contributor

fzzzy commented Apr 7, 2017

I think this is mostly done now: as you can see here https://github.com/mozilla/testpilot/blob/master/frontend/src/app/reducers/addon.js RestartState.isRequired is part of the AddonState in redux now, and here https://github.com/mozilla/testpilot/blob/master/frontend/src/app/reducers/experiments.js you can see that inProgress is now a part of the Experiment redux state.

However, an anti-example is https://github.com/mozilla/testpilot/blob/master/frontend/src/app/reducers/newsletter-form.js where I think possibly all that state should be local to the component with setState.

@fzzzy fzzzy closed this as completed Apr 7, 2017
@ghost ghost modified the milestone: Sprint 23 May 6, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants