在localStorage中用CycleJS中的初始值折叠

Question

我正在用cycleJS制作一个表情查看器应用程序，用户可以点击任何一个表情符号从他们的收藏列表中添加/删除它。在每次更改时，还将列表保存到localstorage。我正在使用折页 (单击流)构建列表(在每次单击时添加或删除该表情符号)：

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

我能够将此流保存到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流覆盖。如果有人能给我指明正确的方向，我将非常感激。

注:完整的代码相当长，所以我只包括了那些似乎最相关的部分。

Answer 1

这里的问题是，你有两个真相来源：

• 褶皱中使用的价值；
• 本地存储中的值。

这两个来源根本不相互依赖，因此，你正在经历的怪异行为。

一个可行的解决方案是从您的clickFav$和storedEmojis$创建还原器，合并并折叠它们。

以下是它的样子：

const clickReducer$ = clickFavEmoji$.map(
  (favEmojis, selected) => /* same as you previous reducer */
);

const storedEmojisReducer$ = localStorage
  .getItem("favEmojis")
  .take(1)
  .map(/* serialise to json */)
  .map((state, favEmojis) => favEmojis) // here we just replace the whole state

const favEmojis$ = xs
  .merge(storedEmojisReducer$, clickReducer$)
  .fold(
    (favEmojis, reducer) => reducer(favEmojis)
  , [])

return {
  DOM: favEmojis$.map(render)
}

这样，在localStorage中的值与在应用程序生命周期中演化的值之间有一个明确的关系。

用onionify

现在，前面的解决方案工作得很好。当调用还原器时，它会知道localStorage先前给出的值。但是，如果仔细看一下创建favEmojis$的代码，就会发现这是相当大的噪音。它没有特定的业务逻辑，它只是愚蠢地调用给定的还原器。

onionify (https://github.com/staltz/cycle-onionify)通过将对还原器的所有调用集中在一个点上，并将新状态重新注入到应用程序的源中，大大简化了在循环应用程序中管理状态的过程。

代码与前一个版本不会有太大变化，更改将是：-状态将被注入为组件的显式依赖项；-您将不必手动调用减速器。

function Component({ DOM, onion /* ... */ }) {
  const clickReducer$ = /* same as before */

  const storedEmojisReducer$ = /* same as before */

  return {
    DOM: onion
      .state$ // the state is now inside onionify
      .map(render),

    // send the reducers to onionify
    onion: xs.merge(storedEmojisReducer$, clickReducer$)
  }
}