代码之家  ›  专栏  ›  技术社区  ›  R. Kohlisch

Redux:减速机需要其他减速机的状态吗?

  •  4
  • R. Kohlisch  · 技术社区  · 6 年前

    假设我有两个减速机。

    1号减速机:当前选中的项目减速机

    state = {currentlySelectedItemId: 123}
    

    2号减速机:所有项目减速机

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

    我有一个简单的React应用程序,React组件只显示当前选中的项目。一、 例如,基于 currently-selected-item-reducer ,它将找到要显示在 all-items reducer .

    假设当前选定的项目是 123 我想实现一个按钮,它总是在数组中的下一个项目上。现在我需要找到物品 123 all-items-reducer ,获取其在该数组中的索引,然后将其递增。然后我的反应组件将完成剩下的工作。

    但是,这意味着我需要访问 所有项目减速机 在我的 current-item reducer . 这怎么可能?还是我误解了什么?

    当前所选项目 ,因为这将是多余的信息:理论上,我应该能够通过查看 all-items-reducer array 做一个 findIndex()

    1 回复  |  直到 6 年前
        1
  •  9
  •   Jacob    6 年前

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

    1. 把两个减缩器结合起来;有人可能会说,两个状态段是如此的相互关联,以至于一个减缩器应该处理所有的事情。
    2. 您的组件层 找出下一个项目是什么,并分派特定的ID进行选择。
    3. 使用类似 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());