Реакция компонентов с общим состоянием, которые находятся далеко

Question

Я новичок в реактиве, поэтому, пожалуйста, извините меня, если это вопрос о нобе, но я действительно не мог найти ответ в DOC или в другом месте.

Предположим, у меня есть две кнопки со счетчиком, которые разделяют состояние, но находятся далеко друг от друга с точки зрения размещения в пользовательском интерфейсе.

documentation says общий владелец компонента для обеих кнопок должны принадлежать государству. Имеет смысл, если компоненты находятся рядом друг с другом, как в примере, но что делать, если мои кнопки являются частью другой группы пользовательских интерфейсов и находятся далеко в плане вложенности? Мое государство-держатель будет корнем документа, и мне придется передать функцию обработчика вниз по многим слоям. И что, если мне нужно добавить новый компонент где-нибудь еще, который также должен знать состояние? Должен ли я изменить все родительские компоненты, чтобы передать состояние вниз? Это чрезвычайно непрактично.

Без ответа Я бы получил глобальный шаблон для публикации/публикации, например jQuery Observer, и все элементы пользовательского интерфейса могли подписаться/опубликовать его независимо от их положения вложенности.

Как React разрешает это?

---

Связанные вопрос: Если мне нужно загрузить/сохранить состояние в БД, как я прохожу ссылка контроллера (или любой другой) для каждого Реагировать компонент, который хранит состояние?

Answer 1

для глобального состояния вы можете использовать REDUX

Redux является предсказуемым контейнером для JavaScript приложений

для подключения/подписаться компонентом с этим государством, вы должны использовать react-redux

Если компоненты находятся далеко от места гнездования, вы можете соединиться ct/подписаться на них, чтобы сохранить их, и взять только необходимую часть состояния. Они будут обновляться, если будет изменена только необходимая часть.

article, что объясняет, как вы можете сделать ваш случай

, чтобы узнать, как использовать Redux вы можете смотреть это видео от создателя Redux (Dan Abramov)

1. getting-started-with-redux

2. building-react-applications-with-idiomatic-redux

3.I определенно рекомендую вам discordapp rectiflux канал. потому что вы всегда можете задать любой вопрос онлайн.(Там вы можете найти помощников из этого инструмента)

---

альтернативный способ, который менее многословным, то Redux являетсяMobX

MobX битва испытания библиотека, которая делает простое состояние управления и масштабируемой путем прозрачного применения функционального реактивного программирования (TFRP). Философия, лежащая в основе MobX, очень проста:

Все, что может быть получено из состояния приложения, должно быть получено. Автоматически.

Answer 2

Предлагаю посмотреть на Flux stores. Короче говоря, магазины похожи на модель в вашем приложении. Вы можете слушать изменения (подписаться), а также изменять их свойства (публиковать). Вы можете видеть, как это было сделано в example app.

Answer 3

Лучшим вариантом является пойти с Redux.

Redux позволяет использовать такие варианты использования, как ваш, более простым способом :) Это поможет вам со всем государством и сделает вашу жизнь намного проще.

Некоторые хорошие ресурсы для обучения:

• The Redux Website

• Video courses from Dan Abramov, the creator [Free]

• Awesome course on Udemy [Не бесплатно]

• Building Applications with React and Redux in ES6

• И, наконец, посмотрите на this youtube series [Free]

Answer 4

Управление состоянием в средних слоях вашего приложения следует избегать, где это возможно. Эти данные принадлежат хранилищу, в котором содержится глобальное состояние приложения. Затем каждый компонент обращается к состоянию через свои реквизиты.

Наивный подход к передаче данных к компоненту - это передать хранилище через все уровни вашего приложения «вручную», то есть через реквизиты. существуют

Разумных альтернатив, которые используют связанных компонентов, которые имеют доступ к глобальному государству через контекст (в отличие от реквизита). Как правило, презентационный компонент (ваш компонент кнопки) завернут в компонент контейнера, который обрабатывает это соединение с хранилищем, а затем передает данные через реквизиты.

Существует множество рамок, которые облегчают этот процесс, ссылки на которые уже предоставлены в других ответах.

Answer 5

Если вы пытаетесь разделить простые состояния, попробуйте это (я автор): react-provide-state

В противном случае я буду рекомендовать Redux. Он стал самым популярным инструментом управления состояниями приложений.

Я работаю над приложениями, мы используем Redux для управления основными состояниями приложений и почти всеми другими состояниями. Но мы используем «response-provision-state» для простых пользовательских интерфейсов, таких как Modal, Checkbox.