javascript - 在哪里存储ajax请求的参数

Question

我有一个包含许多数据表的应用程序。每个表都有一个排序和过滤器。 对 API 的请求如下所示:

axios.get('path/to/api/users', { params: {
  sort: {
    byField: 'name',
    orderBy: 'DESK'
  },
  filters: {
    status: 'active',
    country: 'spain'
  },
  search: 'pablo'
}});

我的状态结构如下所示:

entities: {
  users: {
    byId: {
      0: {},
      1: {},
    },
    allIds: [0, 1]
  },
  posts: {
    byId: {
      0: {},
    },
    allIds: [0]
  }
}

我有一个问题:a 应该在哪里存储每个表的 params 对象？ 在容器中(this.state)还是在另一个 reducer 中？或者在 url 查询字符串中？

Answer 1

我肯定会保留过滤/排序/分页数据以及存储中的数据(在父对象/reducer 下)。

此信息经常显示 - 当前页面、排序顺序、过滤条件等可能无论如何都会出现在 UI 中。

此外，此信息与数据本身具有内聚性，即它们一起变化。当您获取更多页面时，最后获取的页面将与最后一个页面数据一起更新。将它们放在一起很有意义。

然后可以根据这些数据构建查询字符串。

更新:“如何更好地构造 reducer ？”

好吧，正如我所说，我会将数据和元数据一起保存在某个父对象中。像这样:

const myReducer = (state = {
    data: {...}, 
    metadata: {
        paging: {...}, 
        sort: {...}, 
        filters: [], 
        search: ''
    }
}, action) => ...

这样，数据和元数据一起更改，而如果需要这样的结构更改，则它们的结构可以独立更改。

编辑:LRU 考虑

如果您想保留 N 个版本，则需要将它们存储在不可变的 LRU 实现中。如果您能找到一个(或制作一个)，那么您将如何使用它:

const myReducer = (state = {
    versions: new ImmutableLRU()
}, action) => ... 

reducer 主体然后将对象结构设置到 LRU 中，无论它是如何使用的。可能是这样的:

return {...state, versions: versions.put(JSON.stringify(metadata), data)};

这会将 LRU 键设置为元数据属性的值，您可以相应地查找缓存结果。