Question

我正在尝试使用Redux实现反应教程的tick-tac-toe游戏。到目前为止，我已经完成了这项工作，但工作正常，但两次呈现Board。以下是应用程序详细信息。

State
|
|--> Squares
|--> NextPlayer

我使用AppReducer，它结合了两个独立的缩减器（正方形和下一个玩家）

const appReducer = combineReducers({
    squares: squareReducer,
    NextPlayer: stateReducer
});

两者都是组件Board中的道具，并且具有单独的操作＆amp;减速。我正在使用react-redux mapDispatchToProps这样调用动作。

dispatch(changeSquaresAction(id, next));
dispatch(changePlayerAction(next));

我正在使用connect创建Board HOC，状态会被修改两次，因为我正在调用两个动作。

我的问题是，

Answer 1

由于您有两个单独的减速器组合在一起，因此每次调度动作时都会调用两个减速器。因此，例如，如果您的操作看起来像

{type: 'CHANGE_PLAYER_ACTION', next: 2, id: 1}

然后两个reducer将检查它是否与该动作类型匹配。这意味着你可以只调度一个动作，在squareReducer和stateReducer中它们都可以有

case 'CHANGE_PLAYER_ACTION': 
//insert whatever needs to be done

Answer 2

我会创建2个匹配相同动作的缩减器。

如果您确实只想渲染一次组件，请查看shouldComponentUpdate()方法。但即使render()被调用两次，也不意味着它在浏览器中被重绘。 React知道DOM是否已经改变。查看reconciliation算法。

React提供声明性API，因此您不必担心每次更新都会发生什么变化。这使得编写应用程序更容易，但实现方式可能并不明显在React内。本文解释了我们在React中做出的选择 “diffing”算法，以便组件更新可预测对于高性能应用而言足够快。

Answer 3