cycle.js

Цикл API + Store + UI:

1) Модели в API

API/EntityFoo {
   id,
   bars: [ API/EntityBar ],
   bazs: [ API/EntityBaz ],
   …otherProps
}

API/EntityBar {
   id,
   …otherProps
}

API/EntityBaz {
   id,
   foo: API/EntityFoo,
   …otherProps
}

2) Структура Store

Store {
  entities {
    Store/Foo {
	id,
	bars: [ id ],
	bazs: [ id ],
	…otherProps
     }
    Store/Bar {
	id,
	…otherProps
     }
    Store/Baz {
	id,
	foo: id,
	…otherProps
     }
  }

  feature {
    fooList: [ id ]
  }
}


3) Сохранение данных из API в Store

fetchFooList = (response: [ API/EntityFoo ]) => {
  Store.save(normalize(response, shema))
}


4) Доступ к данным из Store в UI

featureFooListSelector = (state: Store): [ API/EntityFoo ] => {
  return denormalize(state.feature.fooList, state.entities, shema)
}


5) UI

FeatureProps {
  fooList: [ API/EntityFoo ],
  fetchFooList: Function
}

component Feature = (props: FeatureProps) => JSX

component ConnectedFeature = connect(featureFooListSelector, fetchFooList)(Feature)