Redux-正确调度操作

Redux - Dispatching Actions Correctly

本文关键字：操作 调度 Redux-      更新时间：2023-09-26

在我的应用程序中，我有一些小的动作创建者函数，它为应用程序的一小部分返回一个动作。我的理性存在，我想成为"精确的&使用我的逻辑"specific"，同时保持代码的可重用性。

举个例子，我有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更改两次？这是正确的吗？有人能确认一下吗？

应该如何处理这些情况？

我应该为每个场景创建一个唯一的动作类型（以及动作对象）吗？也就是说，应该只有一个调度函数。

谢谢，

我应该为每个场景创建一个唯一的动作类型（以及动作对象）吗？

假设你已经在做了，如果你正在调度两个不同的操作，对吗？我认为你不需要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运行diff算法。。而是要更有条理。React的diff/patch将运行很多，并且您的应用程序仍然非常快。您感觉到的任何缓慢都是由于组件实际更新，因为DOM需要更改，而不是因为协调。

相关文章：