mardi 21 juin 2016

React and redux, modular editing of object hierarchy and REST api

I have Foo object which has an array of Bars. They are separate tables in database and both of them are individual REST api resources.

{
  id: 1,
  data: foo,
  bars: [
    { fooId: 1, data: bar1 },
    { fooId: 2, data: bar2 }
  ]
}

I want to create form like editor which let's me view, edit, add and remove Bar's of the particular Foo. I figured out I would nest BarsComponent in FooComponent, and further BarComponent to hold reference to individual Bar. This component should draw two way bound input box and delete button for Bar prop. BarsComponent should also render add button. There will be multiple children like Bars.

The problem is that save button is in FooComponent, so somehow I must know at the moment of click what changed and where to dispatch right Redux actions with particular domain object. The complexity comes from user being able to do all CRUD operations in arbitrary child components, and I need that information at upper level.

What is approved way to manage this complexity? Would it be fine to create a Redux state for changes, and scan that state in save click handler and dispatch found changes?

Aucun commentaire:

Enregistrer un commentaire