Использование повторно используемых компонентов с ReactJs и Flux с несколькими хранилищами

В моей компании мы начали наш первый проект с ReactJs. Поскольку в конце концов это может превратиться в большую систему, мы решили использовать Flux, чтобы все было организовано. Хотя примеров довольно много, в основном они не основаны на использовании в сложной системе.

Одна из вещей, которую мы хотели бы реализовать, — это пользовательский интерфейс, использующий компоненты, подобные виджетам. Например, у нас есть компонент, который отображает информацию о покупателе. Этот виджет будет использоваться на вкладке с информацией о счете, а также на другой вкладке с карточкой клиента в том же окне браузера. И будут некоторые другие компоненты, в которых будет использоваться этот виджет.

Итак, у меня есть компонент React, который должен прослушивать событие изменения магазина. Однако сам этот компонент не знает, какой магазин слушать, потому что у меня может быть магазин счетов, но также и другой магазин, в котором есть информация о клиенте, которая должна отображаться.

Я нашел этот вопрос, который дает некоторую информацию о том, как создать повторно используемый компонент, но он не дает советов, как использовать компонент с несколькими хранилищами.

Одна вещь, которую я считаю, - это передать хранилище, которое будет использоваться в качестве параметра, в повторно используемый компонент. Будет ли это мудрым поступком?

Заранее спасибо за ваши реакции!


reactjs javascript reactjs-flux
person Björn Boxstart    schedule 23.03.2015    source источник
comment
Вы должны хранить состояние только в одном месте в контейнере родительского компонента и передавать реквизиты каждому компоненту и управлять слушателями изменений только в компоненте родительского контейнера.   -  person Ajay Beniwal    schedule 23.03.2015

Ответы (1)


arrow_upward
4
arrow_downward

Один из способов — обрабатывать всю логику извлечения данных в родительском компоненте. В этой модели ваш компонент CustomerCard не должен знать, как получить свои данные, но вместо этого ожидает, что они будут переданы в качестве реквизита. Это выигрыш для повторного использования, поскольку ваш компонент CustomerCard больше не привязан к конкретному процессу поиска данных.

В вашем случае вы можете создать один компонент контейнера для каждого магазина, и каждый из них будет возвращать элемент <CustomerCard customerInfo={...} /> в своем методе render().

person Alexandre Kirszenberg    schedule 23.03.2015
comment
Ok. Я пойду на этот подход. Вместе с замечанием @Ajay Beniwal это имеет для меня смысл. Спасибо за вашу реакцию. - person Björn Boxstart; 23.03.2015