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 的状态?的主要内容,如果未能解决你的问题,请参考以下文章