Flux: How to make Stores for a Variable Number of React Components?

Question

In the flux tutorial, it says that "Application state is maintained only in the stores."

Short version: I have a variable number of components in my app, each of which maintains state. How am I supposed to use stores here? It seems like I need one store per component.

Long version: I wanted to create a tree of text elements with a variable number of nodes (essentially an app that just lets me create an arbitrary tree and visualize it in HTML).

My current architecture has a Tree element in React, maintains the state:

{ children: [], // children are trees.
parent: someParent }

However, given that each subtree in my tree has state, it appears that I will need one store per subtree! What is the correct way to architect this code?

Answer 1

No, keep the state in just 1 component. All the other components should get their data in the form of props.

In addition, the component that keeps the state shouldn't be aware of the state, but you should be using a store to keep it. Generally, these types of components that know about the state, are named "Container Components". Those components that don't know about state and receive their data with props are called "Presentational Components" (or "dumb components"). Read more here: http://redux.js.org/docs/basics/UsageWithReact.html

Answer 2

Use Redux architecture

Keep your state global,

use container components and reducers to pass props to your components.

http://redux.js.org/docs/api/bindActionCreators.html