Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React + Flux - should store data be stored in a component state, or props?

Tags:

People also ask

What should be stored in React state?

In React , whenever we are working with any data, we always use state for storing that data which may be a string , number or any complex object .

What is the difference between state and props in React?

State is the local state of the component which cannot be accessed and modified outside of the component. It's equivalent to local variables in a function. Props, on the other hand, make components reusable by giving components the ability to receive data from their parent component in the form of props.


If that the flux store is a singleton that maintains the state of the data why do the components use setState and not setProps when accessing the stores? Wouldn't it just mean that I started saving the application state in two (or more) places?

Both the Flux / React documentation and Examples seem to point to setState as the preferred solution, but I've had an interesting conversation with a few colleagues at work and wondered if anyone else came across this

Edit: You can see what I'm talking about in this url: https://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/ThreadSection.react.js

Notice how ThreadSection is a child component, that is fetching data directly from a store and using it as a state.

If you follow the React "way" I would have expected the state to be managed by the store - not a child component.

The solution we thought of is to fetch all stores in the top level component (as props) and pass them down to the child components as needed. But that gets rather ugly rather quickly.

We do that because setProps does not work on child components