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

Posted 2023-02-22

【中文标题】Redux：Reducer 需要其他 Reducer 的状态？

【英文标题】：Redux: Reducer needs state of other Reducer?

【发布时间】：2019-01-09 13:58:30

【问题描述】：

假设我有两个减速器。

Reducer No.1 : Current-Selected-Item-Reducer

state = currentlySelectedItemId: 123

Reducer No.2 : All-Items-Reducer

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

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

问题：

假设当前选择的项目是123，我想去实现一个按钮，它总是会进入数组中的下一个项目。现在我需要在all-items-reducer 中找到项目123，在该数组中获取它的索引，然后递增它。然后我的 React 组件将完成剩下的工作。

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

PS：我不想在我的currently-selected-item-reducer 中引入计数器，因为这将是多余的信息：理论上，我应该能够通过查看all-items-reducer array 并执行 findIndex() 或类似的操作。

【参考方案1】：

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

合并两个减速器；有人可能会争辩说，状态的两个部分是如此相互关联，以至于一个 reducer 应该处理所有事情。 跨 reducer 复制一些数据（显然是浪费，但如果 reducer 确实非常独立，则可能需要一点冗余） 让您的组件层找出下一个项目是什么，然后分派特定的 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());