Question

在我的应用中，我有一些小动作创建函数，可以为应用的一小部分返回一个动作。理性的存在，我想成为'精确＆amp;特定的'用我的逻辑，但保持代码可重用。

举一个例子，我有React'tab'组件，可以在任何地方重复使用。在一个场景中，单击“选项卡”将-1-使选项卡处于活动状态，-2-执行其他所需操作。在另一个场景中，单击“选项卡”将-1-使选项卡处于活动状态，-2-执行其他操作，可能与上面的第一个场景不同。

我想到的逻辑是我会在上面的每个场景中派遣两个动作创建者。第一个显然是常见的，第二个是每个方案独有的。

// rough code for illustrative purposes
activateTab : () => {
 dispatch( actionCreator1 );
 dispatch( actionCreator2 );
},
render: () => {
 <Tab onclick = { activateTab }
}

问题（？）：我发现每个被派遣的动作创建者都会调用reducer功能＆amp;然后让React运行其“不同”算法。即在上面的Tab中，React重新计算所有DOM更改两次？它是否正确？有人可以确认吗？

这些场景应该如何处理？

我是否应该为每个场景制作一个独特的动作类型（＆amp;动作对象）？这意味着，应该只有一个派遣功能。

谢谢，

Answer 1

我是否应该为每个场景制作一个独特的动作类型（＆amp;动作对象）？

如果您正在调度两个不同的行为，大概是您已经这样做了吗？我认为你不需要SET_TAB动作，如果你从不单独使用它，你唯一需要的就是在减速器中听取更多动作。

无论如何，你的假设是正确的，让一个减速器听取许多不同的动作是完全正常的。请将您的活动制表符缩减器视为：

let initial = {
  fooActiveTab: 0, // first foo tab is open
  barActiveTab: 2, // third bar tab is open
}

function activeTab (state, action) {
  switch (action.type) {

    case 'SOMETHING_RELEVANT_TO_FOO':
    case 'FOO_AJAX_SUCCESS':
      return {
        ...state,
        fooActiveTab: action.payload // set current tab
      }

    default:
      return state

  }
}

这使得您的reducer组合非常清晰，因为标签状态会侦听可能会更改活动选项卡的各种内容。这样你就不需要在每个函数调用上调度两个动作。只要你想要激活的选项卡的id发送一个就足够了。

我认为你应该做上述事情，但不是为了阻止React运行差异算法......而是要更有条理。 React的差异/补丁将运行 A LOT ，您的应用仍将非常快。您感知的任何缓慢都是由于组件实际更新，因为DOM需要更改，而不是因为reconciliation。

Redux - 正确调度操作

1 个答案: