Question

如何处理分页和关系数据的Redux状态和/或Reducer组合，例如从Wordpress API获取的特定类别的分页帖子（例如：... /帖子？类别= 11）？

我目前正在这样处理：

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'RECEIVE_POSTS': {
      const { data } = action.payload.result // posts ids
      return { ...state, [action.meta.page || '1']: data }
    }
    default: return state
  }
}

const list = (listName, predicate, getSublistName) => (state, action) => {
  if (action.error || listName != predicate(action)) {
    return state
  } else if (getSublistName) {
    const sublistName = getSublistName(action)
    return { ...state, [sublistName]: reducer(state[sublistName], action) }
  }
  return reducer(state, action)
}

export default combineReducers({
  categories: list(
    'categories',
    (action) => action.meta && action.meta.list,
    (action) => action.meta && head(action.meta.categories)) // head comes from Lodash
  ),
  search: list(
    'search', 
    (action) => action.meta && action.meta.list
  ),
  ...
}

它有效，但我觉得list高阶减速器可以通过对更深的嵌套（感觉不对......）不可知来改进，或者得到的状态形状嵌套得太多

除了使用带有帖子/类别ID和页码的帖子对象postsCategories数组之类的条目之外，我无法完全处于平坦状态，但数据会被复制很多（感觉也错了......）。

有some libraries for pagination但我不相信他们中的任何人都会处理这个问题。

是关于减速剂成分还是状态？既？

Answer 1

我发布了自己的答案，因为我认为它完全适用于来自WP API的分页和关系状态的特定情况。

我通过使用查询字符串（在WP API请求中使用）作为命名状态中每个帖子列表的键来平整我的状态形状。所以它现在看起来像这样：

entities: {
    posts: {
        byId: { ... },
        byList: {
            'page=1': [...], // post ids
            'categories=1&page=1': [...], // post ids
            'search=foo': [...] // post ids
        },
    },
}

帖子列表可以通过所有视图组件轻松共享。我可以分别使用来自React Router params或search的{{1}}或match来选择列表，并使用categories / foo / page / 1获取URL系统或类别= foo＆amp; page = 1，就像在WP核心中一样。

Answer 2

在Redux商店中管理关系数据的标准方法是＆＃34;规范化＆＃34;。请参阅文档中的Structuring Reducers - Normalizing State Shape部分以及我的React / Redux链接列表的Redux Techniques - Selectors and Normalization部分中的一些文章。

就分页而言，文章Advanced Redux Entity Normalization提供了一些有用的示例，说明如何在商店中跟踪规范化数据的多个子集。

还值得注意的是，至少有一个专门为Wordpress API提供React / Redux接口的库，名为kasia。

具有分页关系数据的Redux状态

2 个答案: