ReactJS - props vs state + Store designing -

imagine following: you're writing 'smart-house' application manages temperature in house.

in view i'd to:

• see current temperature each room
• set desired temperature each room
• see whether air conditioning turned on/off each room

there external device, communicating aplication via websockets (it periodically sending current temperature, air conditioning status).

i see 2 options there:

1) create 1 'big' store containging data structures like:

var _data = [    name: 'kitchen',    currenttemperature: 25,    desiredtemperature: 22,    sensors: [        {            name: 'air conditioning'            state: 'on'        }        ... there might other sensors ...    ] ] 

there temperaturemanager component (or similar). have state , fetch store periodically. distribute part of state descendants (ie roomtemperaturemanager, roomsystemsensormanager), passing props.

if changes (for example, temperature in bedroom), fetch data store , re-render descendants if necessary.

2) second solution is

to make roomtemperaturemanagers , roomsystemsensormanagers have own state. related having standalone stores both temperature , systemsensorstate.

those stores have parametrized getters (ie getsensorstate(roomname)) instead of methods fetch data.

question:

which option better?

additional question:

is okay leaf components (ie 1 responsible managing desired temperature) call actioncreator directly? or maybe supervising component should know actioncreator , should pass proper method property descendants?

the 2 options describe in post 2 diffent questions:

1. one big store or several different stores?
2. should child components (roomtemperaturemanagers) have own state or receive props store?

ad 1. 1 big store easier, long not complicated. rule of thumb use: if store has > 300 lines of code, better separate in different stores.

ad 2. props better state. in case, think need state in e.g. temperature-manager: set temperature in app (and want see reflected in slider or whatever). this, need state.

• state updates front-end (optimistic update).
• the component sends of set_temparature action sensor in house.
• then sensor in house confirms has set new temperature app.
• the store(s) update(s) , emit change.
• the temperature setting sensor in house communicated props temperature manager.
• the temperature manager whatever needs (simply update state new prop, display confirmation message, or nice error message if things broke down along communication chain).