javascript - 如何在 redux 中响应 "sanitize"api？

Question

我使用“ sanitizer ”是因为找不到更好的词，“规范化”似乎也有点不同。

我想知道在我的应用中处理 API 响应的正确方法是什么。我说的是这样一种情况，即应用程序期望在 redux-store 中正确呈现的内容与后端交付的内容之间存在差异。

例如，我有一个 reducer 和一个 action:

const InitialState = {
  user: {
    id: -1,
    name: '',
    hobbies: [], // list of strings
    address: {
      city: '',
      country: '',
    }
  }
}

// in reducer
case FETCH_USER_SUCCESS: {
  return {
    ...state,
    user: payload.data, // replace default values with response from backend
  }
}

我期望来自后端的响应将是 InitialState.user 的类型和形状，但这很容易改变，尤其是在开发的早期阶段，如果不处理一堆如果是。例如，如果后端更改 hobbies 字段从 array -> object 更改:

hobbies: {
  count: 34,
  list: [...],
}

然后应用程序将在我之前崩溃的地方崩溃:

user.hobbies.map(h => ...

如果尝试访问 user.address.city，当后端“错误地”忘记传送或已返回 address: null 时，也会发生同样的情况。

我希望这很清楚是什么困扰着我。直到现在我用 lodash defaultsDeep方法如:

case FETCH_USER_SUCCESS: {
  return {
    ...state,
    user: defaultsDeep(payload.data, IntialState.user),
  }
}

但这只会保护我免受响应中 undefined 的字段的影响，而不是 null 而不是 Object 或 Arrays 而不是 Object 等等。

我在互联网上找不到任何最佳实践，所以我希望有人能指导我进行良好实践或提出一些想法。

Answer 1

我过去处理这个问题的一种方法是:创建一个适配器类，负责以您期望的形式返回有效负载，并让您的应用程序的其余部分与该类而不是实际服务进行通信。

适配器类将调用实际的 API，并将返回的响应编码为您的应用所需的形式。

无论如何，这可能是个好主意，因为这种解耦会让模拟 API 调用变得更容易。