Comments 9
Можете еще посмотреть мою реализацию, заточенную спеицально под React: react-ioc. Как бонусы: иерархические контейнеры через React Context и вес в 1 КБ.
Вот например InversifyJS это просто хороший IoC container, который можно заюзать и с реактом, и без реакта (с чем захочешь, под что напишешь адаптер).
А зачем в Angular свои иерархические провайдеры? Я писал статью про это не так давно.
Все дело в деталях. Если реализовать DI поверх Inversify, причем иерархический по дереву компонентов, а не вручную созданных child контейнеров, то получим большой overhead, как по размеру бандла, так и по производительности в runtime.
Ну и еще иерархичность DI позволяет code splitting в отличие от.
На случай, если да – сразу спрошу – откуда появляется необходимость делать это прям по дереву компонентов? У нас в проекте (гэмблинг :/) по сути два контейнера – сессионный и конкретной подгружаемой игры – и это вроде хватает.
Замечания.
Лучше бы никогда такие вот методы set, как в классе TodoModel, не делать:
declare let x: TodoModel s.set('isCompleted', 'ещё нет') // типа безопасность
У метода
TodoService.loadдекораторactionни на что не влияет! Для асинхронных методов следует использоватьflow, а неaction.
Почему в методе
saveвы используетеclassToClassпри сохранении существующего элемента, но не используете его при сохранении нового элемента?
Вот в этой строчке —
onChange={e => model.set('isCompleted', e.target.checked)}— что мешало написать по-нормальному?
onChange={e => model.isCompleted = e.target.checked}
2) согласен
3) бага
4) если честно, то раньше такой трюк не работал, нужен был обязательно action для изменения, сейчас это работает, спасибо, положил в копилку
Безопасность? или валидация, если валидация, то это немного про другое
Нет, это именно проблема типобезопасности. Если у вас написано что isCompleted — булев, то вы не должны помещать в него что-то кроме булевых значений. А set позволяет поместить туда что угодно.
если честно, то раньше такой трюк не работал, нужен был обязательно action для изменения, сейчас это работает, спасибо, положил в копилку
Никогда не нужен был action для изменения, если только вы сами не включили режим enforceActions.
Но даже в этом случае вы можете написать вот так:
onChange={action(e => model.isCompleted = e.target.checked)}
ReactJS + MobX — опыт использования DI