在 React UI 中使用规范化的 Redux 状态之前，是否应该对其进行非规范化？答案

【问题标题】：Should you denormalize normalized Redux state before using it in React UI?在 React UI 中使用规范化的 Redux 状态之前，是否应该对其进行非规范化？
【发布时间】：2021-05-14 11:34:05
【问题描述】：

我最近开始使用 Normalizr 库来规范化 Redux 状态的 API 响应，但仍有一些部分让我感到困惑。

当使用标准化的 Redux 状态进行 UI 渲染时，将其传递给组件需要额外的 id props，而仅定义 props 会变得更加复杂

           {postIds.map((postId) => (
            <Post
              postText={entities.posts[postId].body} 
              commentIds={entities.posts[postId].comments}
              postComments={entities.comments}
              postAuthor={
                entities.users[entities.posts[postId].author.username]
              }
            />
          ))}

在 React UI 中使用数据之前，是否应该对数据进行非规范化处理？
或者这是一个正常的模式？如果是这样，有什么方法可以简化它？

【问题讨论】：

标签： javascript json reactjs redux normalizr

【解决方案1】：

是的，当使用标准化状态时，您通常会only pass an item ID to the child component, and let it look up its own data using that ID prop：

const TodoListItem = ({ id }) => {
  // Call our `selectTodoById` with the state _and_ the ID value
  const todo = useSelector(state => selectTodoById(state, id))
  const { text, completed, color } = todo

}

我还建议通读：

关于标准化状态的 "Redux Fundamentals" 和 "Redux Essentials" 教程部分
Redux Toolkit usage guide on working with normalized state。

【讨论】：