Изменение глобального состояния из дочернего компонента

Question

Мне было интересно, какой будет предпочтительный способ для изменения глобального состояния из дочернего компонента с использованием TEA.

В моем случае используется глобальный loading indicator, пока выполняется какой-либо запрос json.

Поиск по google для меня this article, но не 100% это лучшее решение. Любые другие предложения?

---

Немного больше фона:

У меня есть SPA с различными компонентами и компонентом "Loader". Компонент загрузчика должен обрабатывать переходы между представлениями.

Например, предположим, что у меня есть 3 вида: (A) Личные данные (B) Счета (C) Детали транзакции.

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

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

В сущности, я стараюсь избегать отображения страницы (C), прежде чем ресурс для этого будет загружен.

Answer 1

Структура, как показано ниже, может, надеюсь, заставит вас идти.

Подробнее о scaling Elm here (highly recommended)

В примере ниже вы сохранить все данные в модели верхнего уровня, а также ваши сообщения, а также.

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

Этот пример переходит на страницу транзакций, как только сделки бывают.

type alias Model = 
    { accounts: List Account 
    , transactions: Transactions 
    , currentPage : Page 
    , message : String 
    } 

type Transactions = Idle | Loading | GotEm (List Transaction) 

type Page = DashboardPage | AccountsPage | TransactionsPage 

type Msg = ShowDashboard | ShowAccounts | ShowTransactions | GotJSONData 

update msg model = 
    case msg of 
    ShowTransactions -> 
     case model.transactions of 
     GotEm transactions -> 
      { model 
      | currentPage = TransactionsPage 
      , message = "" 
      } ! [] 

     Idle -> 
      { model 
      | currentPage = DashboardPage 
      | transactions = Loading 
      , message = "Loading transactions" 
      } ! [ API.getTransactions model GotJSONData ] 

     Loading -> 
      model ! [] 

    GotJSONData transactions -> 
     { model 
     | transactions = GotEm transactions 
     , message = "" 
     , currentPage = TransactionsPage 
     } 

view model = 
    case model.currentPage of 
    DashboardPage -> 
     DashboardPage.view model 

-- DASHBOARD module 

view model = 
    div [] 
    [ ... 
    , button [ onClick ShowTransactions ] [ text "Show transactions"] 
    ]