Question

考虑这个简单的Redux应用程序：

const items = (state = [], action) => {
   switch (action.type) {
      case "ADD_ITEMS":
         return addItems(state, action.items)
      case "REMOVE_ITEMS":
         return removeItems(state, action.items)
      default:
         return state
   }
}

const page = (state = 1, action) => {
   switch (action.type) {
      case "PREVIOUS":
         return state - 1
      case "NEXT":
         return state + 1
      default:
         return state
   }
}

const reducer = combineReducers({ items, page })

如您所见，状态包含两个部分：

items：项目列表。可以在列表中添加和删除项目。
page：UI中的分页系统的当前页面。假设一次应显示十个项目，并且用户可以在页面之间导航。

UI用Redux呈现：

const mapStateToProps = (state) => {
   const start = (state.page - 1) * 10
   const stop = state.page * 10 - 1
   return {
      visibleItems: state.items.splice(start, stop)
   }
}

当前该应用存在错误。如果用户在第5页上，并且除去了11个项目，则page将突然具有无效值。不再有第五页，只有第一页和第二页！所需的行为是应将其更改为两个最高的有效页面。

我可以通过在case "REMOVE_ITEMS"减速器中添加page来处理这种情况。但是page不知道items.length的新值是什么。要知道，它需要访问items状态，然后重新计算removeItems的结果。对我来说，这听起来不是一个好的设计。

另一种选择是只编写一个reducer，但这将是一个混乱的过程，我不愿将这些代码段与单独的任务合并。

处理这种情况的最佳方法是什么？

从列表中删除项目时，Redux分页不起作用

0 个答案: