我是react-redux世界的新手,在查看复杂数据流时遇到了一些麻烦(我认为)。
假设状态包含一组轨道和一组喜爱的轨道ID。用户可以从许多不同的组件中收藏一首曲目,例如音乐播放器,曲目列表,图表和所有其他人都必须重新渲染。
目前,我正在触发一个操作,以便在收藏夹数组中添加/删除轨道ID。但我不太清楚如何从那里开始。
我的计划是触发另一项行动,例如trackItem reducer用于监听和继续。或者每个相关组件是否可以直接订阅收藏夹集合的更改?或者我可以让两个减速器听同样的动作吗?我现在已经知道如何实现类似的东西,而且我有一种直觉,认为我走错了路。
感觉我正在努力摆脱我的骨干牵线木偶的习惯。你会怎么做?
我的另一个计划是在轨道项json中有一个isFavorited布尔值,并使用action / reduce来更新/切换该属性。我理解normalizr将合并具有相同ID的实例,因此订阅其更改的任何组件都会做出反应。
答案 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数组传递给每个;然后从任何组件调度操作addFav
或removeFav
,在favorites
reducer中做出反应,看看redux传递新的道具来反应组件。