4

我是 react-redux 世界的新手，在可视化一段复杂的数据流时遇到了一些麻烦（我认为）。

假设状态包含一组曲目和一组最喜欢的曲目 ID。用户可以从许多不同的组件中收藏一首曲目，例如音乐播放器、曲目列表、图表，所有其他组件都必须重新渲染。

目前，我正在触发一个动作，以在收藏夹数组中添加/删除曲目 ID。但我不太明白如何从那里开始。

我的计划是触发另一个动作，例如 trackItem 减速器来监听并继续。或者每个相关组件可以直接订阅收藏夹集合的变化吗？或者我可以让两个减速器听同一个动作吗？我现在知道如何实现类似的东西，而且我有一种直觉，我走错了路。

感觉就像我正在努力摆脱我的骨干木偶习惯。你会怎么做？

我的另一个计划是在轨道项目 json 中有一个 isFavorited 布尔值，并使用一个动作/减少来更新/切换该属性。我知道normalizr将合并具有相同 id 的实例，因此任何订阅其更改的组件都会做出反应。

4

3 回答 3

2

在一个以上的减速器中听一个动作是可以的，所以也许走那条路？

您的组件是否共享共同的父组件？如果他们这样做了，connect它会传递给你的 redux 应用程序状态，并将最喜欢的 ids 数组传递给每个人；然后调度动作addFav或removeFav从任何组件，在favoritesreducer中做出反应并看到redux传递新的道具来反应组件。

于 2015-10-12T12:54:44.423 回答
2

或者每个相关组件是否可以直接订阅收藏夹集合的更改

他们可以。但是这些组件是否都共享一些父组件？如果是这样，我会让该父组件订阅收藏夹数组的状态更改，并将其作为道具传递给需要它的组件。

我建议认真阅读 redux 文档：https ://rackt.github.io/redux/

特别是使用 React：https ://rackt.github.io/redux/docs/basics/UsageWithReact.html

通常，您将拥有一个为路由呈现的“智能”组件，该组件将订阅 redux 存储并传递其嵌套的“哑”组件所需的数据。

因此，让您的智能组件订阅收藏夹数组的状态更改，并将其作为道具传递给需要它的组件。

于 2015-10-07T23:59:34.247 回答
2

我认为您应该首先了解 reactjs 中的智能组件和哑组件，这是链接，因此您将拥有一个连接到减速器并更新子（哑）组件的智能组件。

如果你仍然想要两个 reducer，你可以有一个 action 执行它的操作，结果它调用另一个 action。要实现这一点，您需要有一个redux-async-transitions，示例代码如下

function action1() {
 return {
  type: types.SOMEFUNCTION,
  payload: {
   data: somedata
  },
  meta: {
   transition: () => ({
    func: () => {
     return action2;
    },
    path : '/somePath',
    query: {
     someKey: 'someQuery'
    },
    state: {
     stateObject: stateData
    }
   })
  }
 }
}
于 2015-12-07T10:05:58.243 回答