reactjs - In Flux what's the appropriate way for an action in one React component to affect another component? -

i'm trying wrap head around facebook's flux...

say have app side menu can hidden , shown via button in header.

my header 1 component, side menu component.

currently header component sets class on html div side menu element gets animated hidden css.

what's general idea here?

reactjs doesn't care how gets data (how it's data getting passed in or how data should handled across web application). that's flux comes in, creates functional approach on how data handled. data-flow essentially:

action -> data store -> component 

mutation of data happen through calling actions. data stores have listen on actions , mutate data within store. keeps data structure , logic flat.

in case, dataflow this:

header --> user click --> fires action --> updates store --> side menu listening , responding store change.

your case simple example don't need flux. think it's easier if have parent component maintains view state logic, , use props/callbacks 2 children components (side menu , header). more advanced example need make ajax calls , maintain session, flux become useful. if have login component, , want show different side-menu options , header options depending on user:

login component --> user logins --> calls action #signin --> showing loading state                                                          --> dispatcher handles action (make api call authenticate user , load user data)  on success (for api call), alert sessionstore, , populate store data on error, maybe fire action says login failed or  sessionstore ---> header component (listens store) --> update view based on store information              ---> side menu component (listens store) --> update