从子组件更改全局状态

Question

我想知道使用 TEA 从子组件修改全局状态的首选方法是什么。

我的用例loading indicator在任何 json 请求正在进行时都有一个全局显示。

谷歌搜索导致我这篇文章，但不是 100% 这是最好的解决方案。还有其他建议吗？

---

多一点背景：

我有一个包含各种组件和“加载程序”组件的 SPA。加载器组件应该处理视图之间的转换。

例如，假设我有 3 个视图：(A) 仪表板 (B) 帐户 (C) 交易详情。

当用户在 (A) 上并单击我希望 (A) 发送的事务时，通知加载程序它需要加载事务资源，并且完成后更新浏览器位置，以便根组件可以处理路由。

加载器在加载资源时应该在页面顶部显示一个加载栏。完成后，它将更新位置栏，以便根组件可以处理路由。

本质上，我试图避免的是在加载资源之前显示 (C) 页面。

Answer 1

像下面这样的结构有望帮助您前进。

有关扩展 Elm 的更多信息请参见此处（强烈推荐）

在下面的示例中，您将所有数据以及消息保留在顶级模型中。

这样的设置没有父子关系。所有视图都使用相同的顶级模型，并且所有视图都会生成相同类型的消息。

此示例在交易进入后立即导航到交易页面。

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"]
    ]