javascript - Redux - 正确调度操作

Question

在我的应用程序中，我有小的 Action 创建器函数，它返回应用程序一小部分的 Action 。我的理性是我希望我的逻辑“精确且具体”，同时保持代码可重用。

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

我想到的逻辑是，我会在上面的每个场景中调度两个 Action 创建者。第一个显然是常见的，第二个是每个场景所特有的。

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

问题(？):我突然想到，每个被调度的 Action 创建者都会调用reducer函数，然后让React运行它的“不同”算法。 IE。在上面的 Tab 中，React 重新计算了所有 DOM 更改两次？它是否正确？有人可以确认一下吗？

这些情况应该如何处理？

我应该为每个场景创建一个唯一的操作类型(以及操作对象)吗？这意味着，应该只有一个调度函数。

谢谢

Answer 1

Should I be making an action type (& thereby action object) unique to each scenario?

如果您正在正确地调度两个不同的操作，那么您可能已经在这样做了？我认为你不需要 SET_TAB 操作，如果你从不单独使用它，你唯一需要的就是在你的 reducer 中监听更多操作。

无论如何，您的假设都是正确的，并且让一个 reducer 监听许多不同的操作是完全正常的。考虑您的事件选项卡缩减程序看起来像这样:

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 组成非常清晰，因为选项卡状态会监听各种可能会更改事件选项卡的内容。这样，您不需要在每个函数调用上分派(dispatch)两个操作。只要您发送想要激活的选项卡的 id，只需一个操作就足够了。

我认为你应该执行上述操作，但不是为了阻止 React 运行 diff 算法......而是为了更有组织性。 React 的 diff/patch 将运行大量，并且您的应用程序仍然会非常快。您感觉到的任何缓慢都是由于 DOM 需要更改而实际更新的组件，而不是因为 reconciliation 。