React redux favorite action

Question

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

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

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

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

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

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

Answer 1

  

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

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

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

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

通常你会有一个聪明的＆＃39;为路由呈现的组件，它将订阅redux存储并向下传递其嵌套的数据＆＃39; dumb＆＃39;组件需要。

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

Answer 2

我认为你应该首先了解reactjs中的智能和愚蠢组件，这里是link，所以你将拥有一个智能连接到你的reducer并更新你的孩子（哑）组件。

如果你仍然想拥有两个reducer，你可以有一个执行其操作的动作，因为它调用另一个动作。要实现这一点，您需要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
    }
   })
  }
 }
}

Answer 3

在多个减速机中听一个动作是可以的，所以也许沿着这条路走？

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