gpt4 book ai didi

node.js - React Apollo 和 Redux : Combine custom reducers with Apollo state

转载 作者:太空宇宙 更新时间:2023-11-03 22:42:09 25 4
gpt4 key购买 nike

当将 react-apollo 与 redux 结合使用时,来自服务器的数据将缓存在 apollo 键下的 redux 存储中:

{
apollo: // results from Apollo queries
}

创建自己的 reducer 和相应的状态树后,您的商店可能如下所示:

{
apollo: { ... },
ui: {
selectedItem: 2;
showItems: 6
}
}

想象一下,有一个操作会更改 ui.selectedItem 的值,并且该值是埋藏在 apollo 对象中某处的项目的索引。

reducer composition ,我们的 ui 状态的 reducer 将无法访问 Apollo 状态下的任何内容。

在我们的组件中,我们可以通过 mapStateToProps 订阅 ui 状态的变化,并且我们可以使用 react-apollo 将 Apollo 结果映射到 props code> GraphQL 容器(或 @graphql 装饰器)。

但是我们如何使用根据 Apollo 结果和应用程序中的其他状态计算出的值来更新我们的存储?

例如,如果 apollo.item.list 是一个项目数组,而 ui.selectedItem 是您要在该列表中定位的索引 - 如何store 包含以下值:

apollo.item.list[ui.selectedItem]

最佳答案

你是对的——对于 reducer 组合,每个 reducer 不应该访问状态的其余部分。问题是为什么您甚至需要您的 store 包含 apollo.item.list[ui.selectedItem] 的单独值。

大概您需要此值来在容器内呈现正确的项目。要计算它,您只需要在 mapStateToProps 中调用适当的选择器即可。传入整个状态,得到你需要的值。一个简化的例子:

const mapStateToProps = state => ({
itemToShow: itemSelector(state)
})

const itemSelector = ({ apollo, ui }) => apollo.item.list[ui.selectedItem]

您需要将容器包装在 connectgraphql HOC 中才能使其工作,尽管据我所知,无论您是否将其包装在先选其中一个似乎并不重要。您还可以考虑使用 reselect这对于此类派生数据来说是理想的选择。

编辑:由于 Apollo 的商店 block 并不是真正设计为如上所述使用的,您可能会发现将其分为两个步骤更容易:首先,分配 ui.selectedItem到 mapStateToProps 中的 prop。然后,如果您使用 graphql HOC 包装容器,则可以像这样引用该 prop:

const mapStateToProps = state => ({ selectedItem });
const mapDataToProps = ({ ownProps: { selectedItem }, data }) => ({
itemToShow: data.item.list[selectedItem]
});
const ContainerWithData = graphql(myQuery, { props: mapDataToProps })(MyContainer);

export default connect(mapStateToProps)(ContainerWithData);

或者您可以使用 apollo-react 的 compose 来获得更简洁的方法。

关于node.js - React Apollo 和 Redux : Combine custom reducers with Apollo state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44975471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com