在 React UI 中使用规范化的 Redux 状态之前，你应该去规范化它吗？

Question

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

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

           {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？
或者这是一个正常的模式？如果是这样，有什么办法可以简化它吗？

Answer 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" and "Redux Essentials" 教程部分
Redux Toolkit usage guide on working with normalized state.

在 React UI 中使用规范化的 Redux 状态之前，你应该去规范化它吗？

Should you denormalize normalized Redux state before using it in React UI?

javascript

json

reactjs

redux

normalizr