3

ユーザーが絵文字をクリックしてお気に入りのリストに追加/削除できる、cycleJSを使用して絵文字ビューアーアプリを作成しています。localstorageリストは変更のたびに保存されます。クリック ストリームを折りたたみ(クリックごとに絵文字を追加または削除)、xstreamを使用してリストを作成しています。

const favEmojis$ = clickFavEmoji$.fold(
  (favList, selectedEmoji) =>
    favList.includes(selectedEmoji)
      ? favList.filter(emoji => emoji !== selectedEmoji)
      : [...favList, selectedEmoji],
    []
);

@cycle/storageドライバーを使用して、このストリームをlocalStorageページに保存してロードすることができます。

const storageRequest$ = favEmojis$.map(favEmojis => ({
    key: "favEmojis",
    value: JSON.stringify(favEmojis)
  }));
...
return {
    DOM: vdom$,
    ...
    storage: storageRequest$
  };
}

ただし、配列を localStorage からお気に入りのストリームにプリロードする方法がわかりません。から配列がロードされたら、考えられるあらゆる方法でlocalStorageそれをストリームとマージ/連結しようとしました。favEmojis$例えば:

const storedEmojis$ = localStorage
    .getItem("favEmojis")
    .map(favEmojis => (favEmojis ? JSON.parse(favEmojis) : []))
    .take(1);

const combinedFav$ = xs.merge(storedEmojis$, favEmojis$);

しかし、これは機能しません - からの配列localstorageは折りたたみclickFavEmojiストリームによって上書きされます。誰かが私を正しい方向に向けることができれば幸いです。

注意: 完全なコードは非常に長いため、最も関連性が高いと思われる部分のみを含めました。

4

1 に答える 1