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

问题描述

说我有两个减速器。

减速机No.1：当前选择项目减速机

state = {currentlySelectedItemId: 123}

减速机编号2：All-Items-Reducer

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

我有一个简单的React应用程序，React组件只显示当前选中的项目。即，基于当前选择项目减少器中的id，它会找到要在 all-items reducer中显示的正确项目。

I have a simple React app and a React component simply displays the currently selected item. I.e., based on the id in the currently-selected-item-reducer, it find the correct item to display in the all-items reducer.

问题：

说出当前所选的项目是 123 我想要实现一个按钮，它始终是数组中的下一个项目。现在我需要在 all-items-reducer 中找到item 123 ，在该数组中获取其索引，然后增加它。然后我的React组件将完成剩下的工作。

Say the currently selected item is 123 and I want to go to implement a button which will always go the next item in the array. Now I need to find item 123 in the all-items-reducer, get its index in that array, and then increment it. Then my React component will do the rest.

但是，这意味着我需要访问 all-items-reducer的数组在我的当前项目缩减器中。这怎么可能？或者我在这里误解了什么？

However, this means that I need to access the array of the all-items-reducer in my current-item reducer. How is this possible? Or am I misunderstanding something here?

PS：我宁愿不在我的当前选择的项目减速器中引入一个计数器，因为这将是多余的信息：理论上，我应该能够通过查看 all-items-reducer数组来找到当前选择的项目位置并执行 findIndex（）或类似的事情。

PS: I would prefer to not introduce a counter in my currently-selected-item-reducer, since this would be redundant information: I should, in theory, be able to find the item position of the current selection by looking at the all-items-reducer array and do a findIndex() or something like that.

推荐答案

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

There are a few approaches you can take:

1. 合并两个减速器;有人可能会争辩说，两个国家部门是如此相互关联，以至于一个减速器应该处理所有事情。


2. 在减速器上复制一些数据（显然是浪费，但如果减速器确实非常独立，可能需要一点冗余）


3. 让你的组件层找出下一个项目是什么，然后发送要选择的特定ID。


4. 使用类似 redux-thunk 的中间件，它不仅可以调度多动作创建动作，还可以让你查询状态。

1. Combine the two reducers; one could argue that the two segments of state are so interrelated that one reducer should take care of everything.
2. Duplicate some data across reducers (obviously is wasteful, but if the reducers are truly very separate, a little redundancy might be warranted)
3. Let your component layer figure out what the next item is and dispatch the specific ID to select.
4. Use something like the redux-thunk middleware which lets you not-only dispatch a multi-action-creating action but also lets you query state.

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的状态吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！