使用 `useEffect` 发送派遣时, React 和 redux 状态不匹配

作者: nikitar创建于 2024年7月3日更新于 2026年6月13日

QQ 您使用的 React, ReactDOM/ React Independent, Redux, 和 React Redux 的哪个版本 ?

  • 反应: 18.3.1
  • 反应DOM: 18.3.1
  • Redux: 4.2.1
  • Redux反应: 8.1.2

什么是当前的行为?

单击按钮时, 使“ 反向” 组件增加计数器。 它的间接性比必要的还要多,但是它是我所研究的一些更古老的代码中一个bug的简化版本. 试图将反应-redux从7升级到8时发现. (工作罚款7年)

基本的问题是‘setPending Increment(假)'更新了本地状态,然后‘distpatch(counter Actions.setValue(counts + 1))'更新了Redux状态,然而在下个渲染时,本地状态更新并不明显(yet),而Redux状态变化已经显现.

现在,我读到了关于 Stale道具和僵尸的孩子, 所以我知道,这个组件 最终会重新与两个州同步。 没关系,因为制成功能本身没有副作用. 然而,我没想到差异会扩大到`使用效果'。 在使用效果中,我们确实有副作用,例如我们可以向服务器发送请求.

从“ react” 导入{使用效果, 使用状态} 导入“./pp.css” 从“ react-redux” 导入{使用选择器,使用Dispatch}; 从 “./ slics/ counterSlics” 导入{反行动};

函数 App () { const counter = 使用Selector((状态) QQ状态. counter. value; ; cont 发送=使用Distpatch(); (一) [支出递增,设置递增]=使用状态(虚假);

a. 控制台.log(`RENDER ${Counter} ${Convention }}}; 在Click = () => { 设置等效增量( 真); {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

使用效果( ()) {{{ 如果(待递增){ 设置等效增量( 假); 发送( 反行动. setValue( + 1) ) ; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? ; [待增额、设置待增额、计数、出 );

返回( ưμ㼯A <克立克的按钮> 计数为{计数} </按钮 > (中文(简体) ). {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

导出默认 App ;



完整的例子: https://snack.expo.dev/-JCou0gvPMHLWkAO5InqU
(snack.expo.dev不让你打印到控制台,所以很难在那里调试)


什么是预期的行为?

`使用效果'与React状态和Redux状态同步使用。 或者,如果这种模式违反了Redux的一些原则,那么我很想知道细节. 就说,我们到底能做什么,不能做什么。

这个代码与反应-redux 7配合得很好,所以它至少是一个回归.

QQ 哪个浏览器和操作系统受到此期的影响?

macos 14.5 / Chrome 126.0.6478.127 (韩语).

### 在前作"React Redux"的版本中此作有效果吗?

- [X] 对

内容来源: reduxjs/react-redux