Я довольно новичок в React и создаю одностраничное приложение для React.
До сих пор я создавал приложение с компонентами и дочерними компонентами, имеющими собственное локальное состояние, однако дочерние компоненты на самом деле не взаимодействуют друг с другом, чего я и хочу, по сути, с наименьшим количество кода котельной плиты ...
Проблема Я сталкиваюсь с тем, что изменение какого-либо дочернего компонента должно быть в состоянии обновить состояние другого дочернего компонента, где-то еще в дереве компонентов.
Выбор в одном дочернем компоненте также должен иметь возможность запускать функцию в другом компоненте, обновляя ее данными и т. Д.
Я рассмотрел наличие только одного глобального состояния приложения, которое все компоненты могут вызывать и обновлять, когда что-то в них изменяется, и это одно состояние приложения затем обновляет другие компоненты в дереве. Вроде как наличие одного «контроллера» со своим собственным состоянием, которое могут вызывать все «представления» компонентов, и который обновляет состояния других компонентов по мере необходимости. (Я привык к стилю программирования GUI в стиле WPF и MVC).
То, что я рассмотрел:
Можно попытаться реализовать это с помощью функций обратного вызова, определенных в верхней части иерархии, которые будут отправляться вниз по иерархии и вызываться из дочернего компонента при его изменении.
Однако этот метод приводит к МНОГО шаблонного кода, который просто передает функции своим дочерним компонентам. Это неправильно и трудно поддерживать ...
Чтобы избежать всего этого обхода и шаблонного кода, я попытался использовать React Context , однако это не работает так, как я надеялся. Я могу получить доступ к контексту только из функции рендеринга и из функций жизненного цикла, и, к сожалению, я часто получаю сложные ошибки, которые трудно понять. Кажется, я использую React Context, чтобы сделать что-то, для чего вы не должны его использовать ...
Я рассмотрел использование шаблона синглтона в JavaScript, однако тогда этот синглтон должен иметь ссылку на корневой компонент и запрашивать компонент, который необходимо изменить ... Это Похоже, что-то вроде взлома, и, может быть, не такой уж и красивый, но идиот.
Я подумываю попробовать React Redux , однако, похоже, что он во многом похож на React Context (честно говоря, я пока что не особо разбирался в этом).
Что мне нужно:
Мне нужно спросить кого-то с большим опытом работы с React, чем у меня: как вы поддерживаете глобальное состояние приложения и обновляете дочерние компоненты на основе изменений в глобальном состоянии приложения? Кроме того: я думаю, что все это неправильно? Пытаюсь ли я что-то сделать нереагирующим образом, не понимая, как мне это сделать в React?