Redux:Reducer 需要其他 Reducer 的状态?

Posted

技术标签:

【中文标题】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());

【讨论】:

以上是关于Redux:Reducer 需要其他 Reducer 的状态?的主要内容,如果未能解决你的问题,请参考以下文章

Redux

再次对redux进行研究

使 Redux reducer 和其他非组件可热加载

React Redux:在 Reduce 状态下使用不可变

总结下Redux

总结下Redux