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

我的状态看起来像：

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>
  );
}

以及一个看起来像：

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>
  );
}

我想我可以把state.entities.pageDict作为道具从容器中传递过来。。但我试着看看选择器模式，看看这个：

我想知道我是否做错了，有人能给我一些启示吗？我只是想确定我做得对

编辑：我从和SoundCloud Redux项目中得到了使用实体的想法

EDIT2：我在网上看到过这样的东西，但我怀疑我是否用错了，我不知道如何将它应用到我自己的项目中

---

EDIT3：我倾向于创建一个选择器，它将获取pageIdList并从pageDict返回pageobjects的列表。。这样，我就已经有了要传递到页面组件中的对象。

我想我会遵循您在这里尝试的操作。使用Redux，尝试将用户界面视为始终显示不变的内容：而不是“向其传递内容”，而是“从状态读取内容”。当你的状态改变时，你的用户界面就会更新（虽然并不总是这么简单，但这是一个很好的开始）

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

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

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

例：

您的页面对象可能如下所示：

//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) 

//Page.js
类页扩展了React.Component{
render（）{
const{pageIdList，pageEntities}=this.props//注意我使用的是props，因为它是通过redux连接的
返回(
{pageIdList.map（（pageId，索引）=>{
return//我正在从地图中提取对象
}}
)
}
}
//connect是Redux connect函数
导出默认连接（（存储）=>{//大多数示例在此处使用“状态”，但它是redux存储
返回{
pageEntities:store.pageEntities，
pageIdList:store.pageList
}
})（第页）

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

这段代码的结果（可能有一些类型）是您应该看到：

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

为了明确回答您的问题，我正在提取的实体是全局Redux存储（而不是内部组件状态）。“映射到道具的状态”实际上是“映射到道具的存储”，因为“状态”是React的一部分，“存储”是您的Redux存储

---

这有帮助吗？React+Redux真的很好一旦你弄明白了，我花了整整一个月的时间来理解所有的细节，但从长远来看它确实简化了事情。

什么是

pageIdList

，你需要在

pageObj

中使用什么对象？根据你的状态，这还不清楚structure@klugjoPageIdleist包含一个列表of页面ID..它可以由用户重新排序/添加/删除..页面字典中的任何ID。我将编辑OP，使其更清晰