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

Question

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

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

我能够将此流保存到 localStorage 并使用 @cycle/storage 将其加载到页面上司机:

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$ 中创建 reducer，将它们合并并折叠在一起。

这是它的样子:

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

现在，之前的解决方案运行良好。当 reducer 被调用时，它知道 localStorage 给出的先前值。但是，如果您仔细查看创建 favEmojis$ 的代码，就会发现它非常杂乱无章。它没有特定的业务逻辑，只是愚蠢地调用给定的 reducer。

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

代码与以前的版本相比没有太大变化，变化是:- 状态将作为组件的显式依赖项注入(inject)；- 您不必手动调用 reducer 。

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$)
  }
}