2015-11-23 2 views
4

Иногда это не очевидно: , где я должен сохранять состояние вида React, т. Е. Активная вкладка, выбранная опция, значение toggler, является введенным флагом подтверждения?Flux + React: когда сохранить состояние визуальных компонентов в магазине

На самом деле есть два варианта:

  1. Throw действие и сохранить эти данные в хранилище
  2. Keep, что данные, как просмотр состояния в

Какой из них лучше? Являются ли магазины предназначены только для данных с сервера?


Мои соображения:

  1. Это плохо, чтобы сохранить эти данные в магазине, потому что это приводит к цепи действий. Пример: вам нужно загрузить данные при выборе вкладки, поэтому вы вызываете действие NEW_TAB_SELECTED и из магазина, который обрабатывает его, запускает новое действие DOWLOAD_TAB_DATA.
  2. Сохранение данных позволяет избежать первого действия (NEW_TAB_SELECTED) и избежать цепей действий. Но как сохранить выбранную вкладку, если я хочу оставить это представление?

ответ

4

Вещи, которые должны храниться в состоянии компонента, являются вещами, которые влияет только на этот компонент.

Так, например, если у вас есть компонент, который открывается, чтобы показать больше контента, тогда флаг isOpen можно сохранить в состоянии, потому что он является внутренним компонентом.

Если информация не является частью компонента (например, текст сообщения и прочитано ли сообщение), его следует хранить в магазине и распространять через приложение по мере необходимости.

Изменение состояния компонента приведет к его перерисовке, поэтому постарайтесь сохранить состояние минимально возможного представления его состояния и сохраняйте эти свойства только в this.state.

Поэтому, исходя из того, что я могу собрать из вашего вопроса, я предлагаю сохранить активную вкладку, выбранную опцию, значение toggler и проверяется ли вход в this.state. Это все свойства компонента, но не влияют на какие-либо другие компоненты. Я бы сохранил данные, которые заполняют представления в магазине. Я бы сохранил флаги, которые указывают состояние представления в this.state.

Надеюсь, что это поможет.

Смежные вопросы