ユーザーが絵文字をクリックしてお気に入りのリストに追加/削除できる、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
ストリームによって上書きされます。誰かが私を正しい方向に向けることができれば幸いです。
注意: 完全なコードは非常に長いため、最も関連性が高いと思われる部分のみを含めました。