首页 文章

React redux收藏夹动作

提问于
浏览 次
4

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

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

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

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

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

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

javascript reactjs react-native redux

3 回答

  • 1

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

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

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

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

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

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

    回复于
  • 2

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

    如果你仍然希望有两个reducers，你可以有一个执行其操作的动作，因为它调用另一个动作 . 要实现这一点，你需要有一个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
    }
   })
  }
 }
}
    回复于
  • 2

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

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

    回复于

相关问题