Redux-正确调度动作

Question

在我的应用程序中，我有小的动作创建者函数，该函数会为应用程序的一小部分返回一个动作。 我的理性是我想对自己的逻辑做到“精确而具体”，同时又要保持代码的可重用性。

举个例子，我有React'tab'组件，这些组件可在任何地方重复使用。 在一种情况下，单击“选项卡”将-1-启用选项卡，-2-执行所需的其他操作。 在其他情况下，单击“选项卡”将使-1处于活动状态，而-2-做其他事情，可能与上述第一种情况不同。

我想到的逻辑是，在上述每种情况下，我都会派遣两个动作创建者。 第一个显然是常见的，第二个对于每种情况都是唯一的。

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

问题（？）：我想到每个派遣的动作创建者都会调用reducer函数，然后让React运行其“差异”算法。 即在上面的Tab ，React重新计算所有DOM更改两次？ 这个对吗？ 有人可以确认吗？

这些场景应该如何处理？

我是否应该使每个场景都具有唯一的动作类型（从而使动作对象）？ 这意味着应该只有一个调度功能。

谢谢，

Answer 1

我是否应该使每个场景都具有唯一的动作类型（从而使动作对象）？

如果您要分派两个不同的操作，大概是您已经在执行此操作了吗？ 我认为您不需要SET_TAB动作，如果您从不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

  }
}

由于制表符状态会监听各种可能更改活动制表符内容的内容，因此这使您的减速器组成非常清晰。 这样，您无需在每个函数调用上分派两个操作。只要发送要激活的选项卡的ID，只需一个就足够了。

我认为您应该执行上述操作，但不是为了防止React运行diff algo ..而是要使其更有条理。 React的diff / patch将运行很多 ，您的应用程序仍将非常快。 您感觉到的任何缓慢都是由于组件实际更新引起的，因为DOM需要更改，而不是由于对帐 。