React redux favorite action

时间:2015-10-07 23:08:19

标签: javascript reactjs react-native redux

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

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

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

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

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

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

3 个答案:

答案 0 :(得分:2)

  

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

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

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

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

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

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

答案 1 :(得分: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
    }
   })
  }
 }
}

答案 2 :(得分:1)

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

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