Redux

Question

在我的应用程序中，我有一些小的动作创建器功能，returns 一个动作用于应用程序的一小部分。我的理性是我想 'precise & specific' 符合我的逻辑，同时保持代码可重用。

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

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

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

问题(?): 我突然想到每个被分派的动作创建者都会调用 reducer 函数，然后让 React 运行成为它的 'differing' 算法。 IE。在上面的 Tab 中，React 正在重新计算所有 DOM 的变化两次？这个对吗？有人可以确认吗？

这些情况应该如何处理？

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

谢谢，

Answer 1

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

假设您已经在执行此操作，如果您正在调度两个不同的操作，对吗？我认为你不需要 SET_TAB 动作，如果你从不单独使用它，你唯一需要做的就是在你的减速器中听更多的动作。

无论如何，你的假设是正确的，一个reducer监听多个不同的action是完全正常的。考虑您的活动标签缩减器看起来像：

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 运行ning 差异算法..而是为了更有条理。 React 的差异/补丁将运行很多而你的应用程序仍然会非常快。您感知到的任何缓慢都是由于组件实际更新，因为 DOM 需要更改，而不是因为 reconciliation。

Redux - 正确调度动作

Redux - Dispatching Actions Correctly

javascript

reactjs

react-redux