Question

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

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

谷歌搜索引导我this article，但不是100％这是最好的解决方案。还有其他建议吗？

更多背景知识：

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

例如，假设我有3个观看次数：（A）仪表板（B）帐户（C）交易明细。

当用户打开（A）并点击我想要的事务（A）发送通知Loader它需要加载事务资源并且一个完成更新浏览器位置以便根组件可以处理路由

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

本质上我要避免的是在加载资源之前显示（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"]
    ]

从子组件改变全局状态

1 个答案: