从我的实体字典中获取处于规范化状态的对象并将其传递给组件的正确方法是什么？

Question

我的状态看起来像：

entities: {
pageDict: {
['someId1']: { name: 'page1', id: 'someId1' },
['someId2']: { name: 'page2', id: 'someId2' },
['someId3']: { name: 'page3', id: 'someId3' }
}
}
lists: {
pageIdList: ['someId1', 'someId2', 'someId3']
}

一个看起来像的组件

const Pages = ( props ) => {
return (
<div>
props.pageIdList.map(( pageId, key ) => {
return (
<Page
key={ key }
pageObj={ somethingHere }  // What to do here?
/>
);
})
</div>
);
}

要抓住物体，我需要做：

let pageObj = state.entities.pageDict[ pageId ];

我想我可以将state.enties.pageDict作为容器中的道具传递。。但是我试着看看选择器模式，看看这个：

https://redux.js.org/docs/recipes/ComputingDerivedData.html

我在想，如果我做错了，有人能给我一些见解吗？我只是想确保我做得正确。

编辑：我从https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html和SoundCloud Redux项目

编辑2：我在网上看到这样的事情https://github.com/reactjs/redux/issues/584但我质疑我是否使用错误，我不确定如何将其应用于我自己的项目

编辑3：我倾向于创建一个选择器，它将获得pageIdList并从pageDict返回一个页面对象列表。。通过这种方式，我已经有了要传递到我的Page组件中的对象。

Answer 1

我想我明白你在这里要做的。对于Redux，试着把你的用户界面想象成总是显示一些不可变的东西：而不是"向它传递一些东西"，而是"从状态中读取一些东西"。当你的状态发生变化时，你的用户界面就会更新(这并不总是那么简单，但这是一个很好的开始)。

如果我读对了你的答案，你就有了一张页面地图：

//data
{ 
id1: {...pageProperties} },
id2: {...pageProperties} },
id3: {...pageProperties} },
}

你的页面列表就是这些显示的顺序：

例如：

[id2, id3, id1]

你的页面对象可能看起来像这样：

//Page.js
class Page extends React.Component {
render() {
const { pageIdList, pageEntities } = this.props //note I'm using props because this is connected via redux
return (
<div>
{ pageIdList.map((pageId, index)=>{ 
return <Page key={index} pageEntity={pageEntities[pageId]} />  //I'm just pulling the object from the map here
}}
</div>
)
}
}
//connect is the Redux connect function
export default connect((store)=> { //most examples use "state" here, but it is the redux store
return {
pageEntities: store.pageEntities,
pageIdList: store.pageList
}
})(Page) 

现在，当我们想要更改某些内容时，您可以通过调度/操作来更新状态。在减速器中缩小以显示新状态。关于这是如何工作的，有很多例子，但总体思路是更新状态，由组件负责显示

这个代码的结果(可能有一些类型)是，你应该看到：

页面id:2，页面id:3，页面id:1，因为在我给出的示例中，处于状态的页面列表是2，3，1。

为了具体回答您的问题，我提取的实体是全局Redux Store(而不是内部组件状态)。"Map State to Props实际上是"Map Store to Props"，因为"State"是React的一部分，而"Store"是您的Redux商店。

这有帮助吗？React+Redux真的很好，一旦你弄清楚了，我花了整整一个月的时间才了解所有的来龙去脉，但从长远来看，它确实简化了事情。