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流覆盖。如果有人能指出我正确的方向，我将不胜感激。

N.B。完整的代码很长，所以我只包括了最相关的部分。

Answer 1

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

折叠中使用的值;
localstorage中的值。

两个来源根本不依赖于彼此，因此您遇到了奇怪的行为。

可行的解决方案是从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$的代码，那就太吵了。它没有特定的业务逻辑，它只是愚蠢地调用给定的减速器。

onionify（https://github.com/staltz/cycle-onionify）通过在单点集中调用reducers的所有调用并将新状态重新注入应用程序的源代码，极大地简化了在循环应用程序中管理状态的过程。

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

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

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

1 个答案:

使用`onionify`

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

1 个答案:

使用onionify

使用`onionify`