Examples/conventions around transient local state

[ashaffer]

Are there any established patterns for this?

E.g. dropdowns/modals, and things like that. Where the application potentially has some dynamic number of them scattered around, and you need to:

• localize the information on state somehow
• propagate the information to the correct components, that are potentially deeply nested

There is another similar issue here: paldepind/functional-frontend-architecture#14 But all of the answers are nonspecific and relatively unsatisfying.

In particular, in my app I have a dropdown, and that dropdown is somewhat deeply nested within other components. I would like to implement its state in a normalized way, so that at the top-level I have a dropdowns property that is a map of ids to dropdown states and then have a DROPDOWN_OPEN / DROPDOWN_CLOSE action with the id as its payload for my actions. The tricky part though is how you go about getting that data to this deeply nested component.

[cesarandreu]

I keep that kind of UI state (e.g. dropdown) in the component's state.

When I have something like a form inside of the modal, I make a container which is passed in through another container. Each form modal has a selector/reducer under state.forms[formName]. Among its properties it has an active property, which is what I use to track the open/close state.

[ashaffer]

When you say 'the components state', do you mean the React component's local state, or just localized to the component in your redux state atom? I'd prefer not to keep any state in my actual components, but if you mean the latter i'd be curious how you are going about structuring local component state in your redux state atom.

Also, would you mind going into a little more detail about how you pass the forms down through parents?

[gaearon]

Related: #159

[gaearon]

I'll close this as very close to #159, let's continue the discussion there.