Question

我有一个包含两个组件的静态页面。

标题中的一个显示用于处理用户首选项/登录和注册的菜单
主页上的一个，它能够显示用户图像列表或例如关于用户配置文件的表单。

是否可以在这两个组件之间共享状态（例如，向API的access_token）？

我可以为每个组件添加端口，以更新localStorage密钥，并将存储发送给其他组件。

但是有更好的方法吗？

Answer 1

我最终得到的解决方案是使用两个端口：

port saveStore : String -> Cmd msg

port storeChanged : (String -> msg) -> Sub msg

使用解码器和编码器：

serializeStore : AccessToken -> Profile -> Cmd Msg
serializeStore access_token profile =
    encodeStore access_token profile
        |> saveStore


encodeStore : AccessToken -> Profile -> String
encodeStore access_token profile =
    let
        encoded =
            Encode.object
                [ ( "access_token", tokenToString access_token |> Encode.string )
                , ( "profile", encodeUserProfile profile )
                ]
    in
    Encode.encode 0 encoded


deserializeStore : String -> Maybe Store
deserializeStore =
    Decode.decodeString decodeStore >> Result.toMaybe


decodeStore : Decoder Store
decodeStore =
    Decode.map2 Store
        decodeToken
        (Decode.field "profile" decodeProfile)


decodeToken : Decoder AccessToken
decodeToken =
    Decode.field "access_token" Decode.string
        |> Decode.andThen
            (\token ->
                stringToToken token
                    |> Decode.succeed
            )

然后我用它们来同步我的组件存储并在localStorage上保留一个副本：

  <script src="app.js"></script>
  <script>
    // The localStorage key to use to store serialized session data
    const storeKey = "store";

    const headerElement = document.getElementById("header-app");
    const headerApp = Elm.Header.init({
      node: element,
      flags: {
        rawStore: localStorage[storeKey] || ""
      }
    });

    const contentElement = document.getElementById("content-app");
    const contentApp = Elm.Content.init({
      node: element,
      flags: {
        rawStore: localStorage[storeKey] || ""
      }
    });

    headerApp.ports.saveStore.subscribe((rawStore) => {
      localStorage[storeKey] = rawStore;
      contentApp.ports.storeChanged.send(rawStore);
    });

    contentApp.ports.saveStore.subscribe((rawStore) => {
      localStorage[storeKey] = rawStore;
      headerApp.ports.storeChanged.send(rawStore);
    });

    // Ensure session is refreshed when it changes in another tab/window
    window.addEventListener("storage", (event) => {
      if (event.storageArea === localStorage && event.key === storeKey) {
        headerApp.ports.storeChanged.send(event.newValue);
        contentApp.ports.storeChanged.send(event.newValue);
      }
    }, false);
  </script>

如何使用Elm在多个组件之间共享商店？

1 个答案: