Sibling components interaction best practice

[dvshur]

Sibling components interaction best practice

[stratospark]

@dvshur This looks like the perfect place for redux-saga. Look into some of the examples

Basically, your parent component Updater should be attached to a saga. This saga can takeEvery action dispatched clicking the submit button, then handle that in a sub-saga. Inside that sub-saga, you can dispatch the form validation, wait for a response, then dispatch success or error actions. Your reducers can listen for these actions and update your UI state accordingly.

Hope this puts you on the right track.

[dvshur]

Inside that sub-saga, you can dispatch the form validation

@stratospark, but parent component sagas (and the updater as well, for that matter) only have access to parent component actions, while Form 'Validate' is a Form action. Child component's actions are supposed to be encapsulated in a child.

In this case I rather need a way for a parent component to affect the child's state (upon receiving its 'Submit' action on button click)

[biirus]

@stratospark there is some cons.

• you should know exact the same type of action which has been dispatched from button component at form component. And it will break whole component encapsulation.
• you are able to place action watchers whole over components tree. It will cause some unexpected side-effects.

There is a good article about components communication https://facebook.github.io/react/tips/communicate-between-components.html. I do prefer props-callback style, but it don't solve sibling communication.

[tomkis]

Elm is all about top-down hierarchy approach, so yes probably the right Elmish approach would indeed be moving the state information up to the parent.

[tomkis]

Even plain React explains that pretty-well https://facebook.github.io/react/docs/lifting-state-up.html

[q13]

Need more approach