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）或其他减速器中？或者在url查询字符串中？

Answer 1

我个人认为这应该是URL的一部分。这样每个州都可以表示为唯一的URL，这对SEO有利，可以共享直接链接到特定的过滤/排序。

Answer 2

我肯定会将过滤/排序/分页数据与商店中的数据（在父对象/减速器下）保持一致。

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

此外，这些信息与数据本身紧密相关，即它们一起变化。当您获取更多页面时，最后一个提取的页面将与最后一页数据一起更新。把它们放在一起是有意义的。

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

更新：“如何更好地构建减速机？”

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

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键设置为元数据属性的值，您可以相应地查找缓存的结果。

Answer 3

我将所有实体放在一个实体reducer中，然后为每个功能分别设置reducer。所以你将有3个减速器：实体，用户和帖子。假设每个功能都有单独的排序/过滤器，我会组织这样的事情：

entities: {
  users: {
    byId: {
      0: {},
      1: {},
    }
  },
  posts: {
    byId: {
      0: {},
    }
  }
}

users: {
  allIds: [0, 1],
  sort: {
    byField: 'name',
    orderBy: 'DESK'
  },
  filters: {
    status: 'active',
    country: 'spain'
  },
  search: 'pablo'
}

posts: {
  allIds: [0],
   sort: {
    byField: 'date',
    orderBy: 'DATE'
  }
}

Answer 4

我会在这里提出3件事：

1）将params作为URL的一部分。它将为特定的过滤器/排序创建一个唯一的URL，这将有助于SEO。

2）维护一个名为paramsReducer的reducer，它将在更改任何过滤器和排序时更新。 params的InitialState可以是您想要的默认状态。

const paramsInitialState: {
  sort: {
    byField: 'name',
    orderBy: 'DESK'
  },
  filters: {
    status: 'active',
    country: 'spain'
  },
  search: 'pablo'
}

export default function paramsReducer(state=paramsInitialState) {
switch(action.type){
//case for update params
}
}

3）在父组件的安装上更新params状态，以便在需要时在其他组件中使用它。

实体状态也可以标准化：

entities: {
  users: {
    0: {},
    1: {},
  },
  posts: {
    0: {},
  }
}

无需将allIds存储在用户和帖子下作为用户和帖子状态下的键。它将减少应用程序消耗的内存。如果您的应用程序中需要allIds，那么最好从容器级别保存的状态中获取它。

供参考，请参阅此链接Goomo.com。这里过滤，使用URL和状态实现的排序也为应用的过滤器保留。

在哪里存储ajax请求的参数

4 个答案: