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

Question

您将如何处理分页和关系数据的 Redux 状态形状和/或缩减器组合，例如从 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 高阶 reducer 可以通过对更深的嵌套(感觉不对......)的不可知论来改进，或者结果状态形状是嵌套过多。

除了使用像 postsCategories 数组这样的条目，带有帖子/类别 ID 和页码的帖子对象，我无法将我的头包起来以获得完全平坦的状态，但这样数据将是重复了很多(感觉也不对……)。

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

是reducer的组成还是state shape？两个？

Answer 1

我发布了我自己的答案，因为我相信它非常适用于来自 WP API 的分页和关系状态的这种特定情况。

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

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

帖子列表可以通过所有 View 组件轻松共享。我可以分别使用来自 React Router match 或 location 的 params 或 search 选择一个列表，然后得到一个URL 系统使用 categories/foo/page/1 或 categories=foo&page=1，就像在 WP 核心中一样。