React redux 收藏夹动作答案

【问题标题】：React redux favorites actionReact redux 收藏夹动作
【发布时间】：2016-01-05 09:00:30
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-native redux

【解决方案1】：

或者每个相关组件可以直接订阅收藏夹

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

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

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

通常你会有一个“智能”组件来渲染路由，它会订阅 redux 存储并传递其嵌套的“哑”组件所需的数据。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

如果你仍然想要两个 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
    }
   })
  }
 }
}

【讨论】：