Redux Toolkit同一次dispatch中用逗号运算符调用多个reducer无效

根因分析 #

你遇到的问题本质是混淆了逗号运算符的执行逻辑与Redux dispatch 方法的入参规则，具体分为两点：

• 括号内的三个read前缀的action创建函数确实会按照逗号运算符规则从左到右全部执行，分别生成对应的action对象，这个过程完全符合MDN对逗号运算符的定义，不存在前两个函数没有执行的情况。
• 但逗号运算符最终只会返回最后一个操作数的结果，也就是说只有readCorrectAnswer(props.correctAnswer)生成的action对象会被传入dispatch方法。Redux的dispatch一次只能处理一个传入的action，前两个函数生成的action没有被提交到store，自然不会触发对应的reducer执行，也就看不到对应的状态更新。

修复方案 #

要实现三个状态的同时更新，有两种常用实现方式：

1. 分别调用三次dispatch，单独提交每个action：

const dispatch = useDispatch();
dispatch(readGameAnswers(props.gameAnswers));
dispatch(readGameAnswersImage(props.gameAnswersImages as string[]));
dispatch(readCorrectAnswer(props.correctAnswer));

2. 如果这三个更新逻辑本身是强绑定的业务操作，可以直接在对应slice中新增一个reducer，一次性完成三个字段的赋值，仅需dispatch一次即可完成所有更新。

内容的提问来源于stack exchange，提问作者Octavian Niculescu