reactjs - 对标准化数据进行排序的最佳方法是什么?

标签 reactjs redux react-redux normalizr

例如,我有来自服务器的数据

[{id: 1, pinned: true, date: 14.03.2019 ... }, 
 {id: 8, pinned: true, date: 20.02.2019 ...},
 {id: 2, pinned: false, date: 26.03.2019 ...},
 {id: 21, pinned: false, date: 25.03.2019 ...}, ...];

此数据已按日期排序,但固定项目始终位于顶部。

使用 normalizr.js 规范化数据后,我将拥有实体对象和 ids 数组,如下所示:

entities: { 1:[{id: 1, pinned: true, ... }, 8: { id: 2, pinned: true, ...}, ...},
ids: [1, 8, 2, 21 ...];

我会将它存储在不同的 reducer 中。

为了渲染我使用的数据:

const List = (props) => {
  return (
    <ul>
      {props.ids.map(id =>
        <Item id={id} key={id} />
      )}
    </ul>
  )
}
connect((state) => { ids: state.ids })(Item);

const Item = (props) => (
  <li>{props.contact.id}</li>
);

connect((state, ownProps) => { contact: state.entities[ownProps.id] })(Item)

但是如果从服务器我会得到像这样的项目

{id: 30, pinned: false, date: 27.03.2019 ...}

此项目应位于列表中的第一个,但位于固定项目之后。

如何对 ids 缩减器进行排序?

我想到的是对数据进行非规范化,对其进行排序并再次规范化。但这感觉“不对”。

也许有一种无需非规范化的方法?或者针对这种情况的另一种最佳方法。

感谢大家的帮助!

最佳答案

似乎顺序保留在结果属性中,而不是实体中。

看看:https://github.com/paularmstrong/normalizr/issues/9

关于reactjs - 对标准化数据进行排序的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55362920/

相关文章:

reactjs - 安装 React-Redux 会导致 chokidar 问题

javascript - 如何按 id 为我的 react 组件过滤数据列表以获取对象的名称

javascript - react : inline conditionally pass prop to component

javascript - 如何将对象值数组映射到 ReactJS 中的键值数组?

javascript - 使用 react-autoBind 时 ReactJs setState 未定义

reactjs - React.js/Redux : setInterval and clearInterval in Reducers

reactjs - react store.subscribe setState警告

javascript - React Context Provider 所有子级重新渲染

reactjs - React Redux 和继承

reactjs - Axios get in url 有效,但第二个参数作为对象则无效