Question

说我有两个减速器。

第1号减速机：当前所选项目的减速机

state = {currentlySelectedItemId: 123}

第2号减速器：所有项目-减速器

state = [{ id: 123, name: "John"}, {id: 231, name: "Jill"}, {id: 411, name: "Alf"}]

我有一个简单的React应用，React组件仅显示当前选定的项目。即，根据currently-selected-item-reducer中的ID，它会找到要显示在all-items reducer中的正确项目。

问题：

说当前选择的项目是123，我想实现一个按钮，该按钮将始终转到数组中的下一个项目。现在，我需要在123中找到项目all-items-reducer，获取其在该数组中的索引，然后对其进行递增。然后我的React组件将完成其余的工作。

但是，这意味着我需要访问all-items-reducer中current-item reducer的数组。这怎么可能？还是我误会了这里的东西？

PS：我宁愿不要在我的currently-selected-item-reducer中加入一个计数器，因为这将是多余的信息：理论上，我应该能够通过以下方式找到当前选择项的项目位置：在all-items-reducer array处进行findIndex()或类似的操作。

Answer 1

您可以采用以下几种方法：

组合两个减速器；一个人可能会辩称，这两个状态是如此紧密地联系在一起，以至于一个减速器应该照顾好一切。
在化简器上重复一些数据（显然是浪费的，但是如果化简器真的非常分开，则可能需要一点冗余）
让您的组件层弄清楚下一个项目是什么，并分派要选择的特定ID。
使用类似redux-thunk的中间件，它不仅使您可以调度创建多个动作的动作，还可以查询状态。

redux-thunk方法的示例：

function gotoNextItem() {
  return (dispatch, getState) => {
    const { current, items } = getState(); // or whatever the reducers are called
    const index = items.findIndex(item => item.id === current.currentlySelectedItemId);
    const newIndex = (index + 1) % items.length;
    const newItem = items[newIndex];

    dispatch({ type: 'SELECT_ITEM', payload: { item: newItem } });
  };
}

store.dispatch(gotoNextItem());

Redux：Reducer是否需要其他Reducer的状态？

1 个答案: