首页 文章

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

提问于
浏览 次
2

如何处理分页 and 关系数据的Redux状态和/或Reducer组合，例如从Wordpress API获取的特定类别的分页帖子（例如：... / posts？categories = 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
  ),
  ...
}

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

我不能包裹我的头来获得一个完全平坦的状态，除了使用类似 postsCategories 帖子对象的数组和帖子/类别ID和页码，但数据会被重复很多（感觉也错了.. ） .

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

是关于减速器成分还是状态？都？

wordpress redux

2 回答

  • 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 match 或 location 的 params 或 search 来选择列表，并获得一个URL系统，可以使用categories / foo / page / 1或categories = foo＆page = 1，就像在WP核心中一样 .

    回复于
  • 3

    管理Redux存储中的关系数据的标准方法是"normalization" . 请参阅文档中的Structuring Reducers - Normalizing State Shape部分，以及我的React / Redux链接列表的Redux Techniques - Selectors and Normalization部分中的一些文章 .

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

    它已经至少有一个专用于为Wordpress API提供React / Redux接口的库，名为kasia .

    回复于

相关问题