Hacker News new | ask | show | jobs
by sixo 3524 days ago
Not the parent, but when I was trying to learn R+R I kept getting confused by what they meant by 'state'. React state belongs to some component (whichever can mutate it) and is passed to children via props, and generally seems to include a mixture of view state and data/model state, with view-state originating somewhere in the component hierarchy while model state comes from the root. Redux's tutorial implied to me that it expected all mutable state to originate from the root, which clashed with what I had come to expect from React. Since I am fairly new to front-end JS, I just found myself confused at which way was really wiser.
2 comments

This comes up fairly frequently. The honest answer is that it's up to you and the requirements of your app where state gets stored. Unfortunately, state is everywhere: server/database state, local storage/cookie state, redux store state, react state, DOM state, etc. And that's if you have a fairly standard setup. Sometimes you want info from redux store state also stored in local storage and pulled on page reload, sometimes you want to get state from the server before continuing, sometimes an external library insists on DOM state, etc.

Generally, the problem redux is trying to solve is sharing state between components and saving client state globally. If there is information in a component for which you don't want to do either of those things, like UI details such as if a menu is or isn't collapsed, better to have that in the component react state.

Though this can be murky also. Showing the error modal I put in the redux store because I want it to supersede all other modals and to work globally.

This has been my experience anyway, as usual YMMV.

React allows you to keep state in components, but that doesn't mean that you should. When you're using React + Redux, keeping ANY state in components is an antipattern. Keeping all state in the "root" (the redux store) allows you to observe the your app's complete state in one place, all previous states, and the exact sequence of events that triggered all past state transitions. This discipline enables features like time-travel debugging, where you can rewind or fast-forward through your app's states one event at a time.
Trouble with this is, if you have a lot of drop-down menus that is a tremendous amount of additional code, actions have to be added, or added with abstractions, this new thing has to be managed in the global store etc. the end result being that your app is just slower because all this info has to pass through the dispatcher :/. Also can't see how rewinding simple isolated UI effects could help in debugging.

I've noticed that when programmers are introduced to a new technique there is a tendency to apply it everywhere. I had this experience when first learning recursion, it was all I used for a while, until I realized that was silly and now only use it where appropriate. This is true for OOP, functional programming, strictly adhering to even esoteric details of REST, etc.

I've found programming to be a lot like cooking. I really liked garlic, so when I first started cooking I would routinely add a couple extra cloves, until I discovered there very much was the possibility of too much garlic. This is true for each ingredient, you try stuff out and as your experience as a chef grows, you start to be able to suss out the right amount of each ingredient added at the right time.

Programmers are essentially virtual craftsmen, you have a set of tools and you try to build something effective with the tools you have. If you adhere to a principle so fiercely, the pieces of the puzzle often don't quite fit. You end up with a circle or square where something more acorn shaped would be most appropriate.

Anyhoo, don't take my word for it: "A foolish consistency is the hobgoblin of little minds" - Ralph Waldo Emerson or "Only a Sith deals in absolutes" - Obi-wan.

Two responses to my comment, opposite recommendations. I'm inclined to agree with you in general, but the contradicting opinions can't be good for newcomers.
A number of people in the community seem to have latched on to this "you MUST put EVERYTHING into Redux" idea, but it's definitely _not_ anything that's pushed by the Redux team. trex654 is correct here - it's entirely up to you to decide what state should live where.

The Redux FAQ addresses this at http://redux.js.org/docs/faq/OrganizingState.html#organizing... . Note that a number of the linked comments regarding whether or not to use Redux come straight from Dan Abramov himself.

Also, I have a number of articles on React state management practices as part of my React/Redux links list, at https://github.com/markerikson/react-redux-links/blob/master... , which may help clarify some of the ideas as well.