在 Redux 应用程序中规范化 api 响应有什么意义？答案

【问题标题】：What's the point of normalizing api responses in a Redux app?在 Redux 应用程序中规范化 api 响应有什么意义？
【发布时间】：2016-05-11 12:30:20
【问题描述】：

这可能是因为我对 Redux 很陌生，但如果有人能给我一个简单的用例来使用像 normalizr 这样的东西，我会很高兴。

我不明白这里给出的例子How do I handle nested API responses in a Flux application?

我想我不明白为什么 it's hard 让商店使用嵌套对象。

我的应用是一个中型门户，用户可以通过与两个不同的 API 对话来显示列表、创建新项目和新列表。

【问题讨论】：

您阅读文档了吗？ redux.js.org/docs/basics/Reducers.html

标签： json reactjs redux

【解决方案1】：

我对所有对象进行了规范化，但我不使用 normalizr。

我喜欢规范化，因为它使代码更具可读性。下面是一个例子。它还使引用对象和消除重复变得更加容易。例如，如果您订阅了其他人列表中的待办事项，您要么必须在订阅者的subscribedTodos 列表中返回该待办事项的重复版本，要么您必须知道其他待办事项的用户 ID 和待办事项才能按顺序去实现它。

回到可读性：以下哪一个更易于阅读/理解？

function rootReducer (state, action) {
  const { type, payload } = action;

  if(action.type === MODIFY_TODO) {
    return {
      ...state,
      users: {
        ...state.users,
        [payload.userID]: {
          ...state.users[userID],
          todos: {
            ...state.users[userID].todos,
            [payload.todo.todoID]: {
              ...state[userID].todos[todoID],
              ...todo
            }
          }
        }
      }
    }
  } else { return state; }
}

function rootReducer (state, action) {
  const { type, payload } = action;

  if(type === MODIFY_TODO) {
    return {
      ...state,
      todos: {
        state.todos[payload.todo.id]: {
          ...state.todos[payload.todo.id],
          ...payload.todo
        }
      }
    }
  } else { return state; }
}

【讨论】：

非常清楚，谢谢。我认为后一个函数更容易阅读。

【解决方案2】：

使用嵌套对象并不一定很难。

这完全取决于您的用例以及 UI 的组织方式。

如果您使用 normalizr 没有意义，请不要使用它。该模块确实不是必需的。

【讨论】：