reactjs - What to store in redux state? -

i'm building medium-sized react/redux app, , i've become comfortable react - however, redux still little hard wrap head around.

i understand can use connect() redux connect component or container redux state. however, i'm unclear on when - based on complexity? how many props need passed down child components?

what factors can use determine when use connect()?

edit provide example: -----

for example, i'd include messages area users inside app, particularly badge showing number of unread messages. connect() component i'd display badge?

you store state of app in redux. how structure state tree you. can think of state tree 1 giant javascript object. redux, ideally store little component state in react components , instead move redux state tree.

for example, if fetched user data, store in redux state such connected components have access data now. can more granular , store states describe ui components. part of state describes dropdown this

{   mydropdown: {     isopen: false,     options: [       'apple',       'orange'     ]   } } 

i believe point start incorporating redux when app gets point components no longer "dumb" components display data.

edit: try , answer question "when should connect components?". struggled myself don't have great answer yet. right typically connect component if passing down props through many ancestor components component specifically. connecting avoid boilerplate code altogether.