功能组件函数内的 React redux 值返回一个周期晚的值

Question

我最近将我的代码从类组件更改为功能组件并使用钩子。但是，我遇到了一个问题，即使用useSelector和useDispatch访问 redux 值。

let started = useSelector((state: any) => state.routines.started)
const dispatch = useDispatch()

我从useSelector检索的值有效，但是，当在函数内访问此值时，started的值仅返回其先前的预期值。只有在第二次重新渲染后，start 的值才会更改为其预期值。

假设我有这个按钮代码

<Button onPress={() => startRoutine()}>Start routine</Button>

和 startRoutine 函数

let startRoutine = () => {
dispatch(startRoutineAction())
console.log(`started (startRoutine Home): ${started}`);
if(started){
...START CODE
} else {
...STOP CODE
}
}

我希望在调度 startRoutineAction(( 方法后，start 的值变为 true 变为 false。但是，在 startRoutine 函数中记录它后，我得到了false。 奇怪的是，当我像这样在 startRoutine 函数之外记录它时，我会true。这仍然在函数组件中

console.log(started)
return (
...VIEW CODE
)

然后我注意到，尽管操作被正确调度，但从 startRoutine 函数中访问的值被访问了一个周期。这可以在计数器中看到，我在调度addCount((函数后记录当前计数

let addCount = () => {
dispatch(addCount())
console.log(`count: ${count}`);
}

如果计数的值从 0 开始。然后第一次运行 addCount 函数时，它将返回计数值 0，即使预期值应为 1

我正在使用以下软件包版本

• 博览会 ^35.0.0
• react-redux ^7.1.1
• redux-persist ^5.10.0.

Answer 1

在 Redux 中，一旦调度Action，它就不会立即更新存储，它会调用带有操作和当前状态的化简器，它不会等到化简器完成更新状态，同时执行下一条语句。 因此，该值确实会更新，但您会在console语句中获得以前的状态。

您可以查看此文档。