时间戳

首页 > 解决方案 > 在功能组件的函数内反应redux值返回一个周期后的值

reactjs - 在功能组件的函数内反应redux值返回一个周期后的值

问题描述

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

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

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

说我有这个按钮代码

<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() 方法后，started 的值会变为 true 到 false。但是，我false在将它记录到 startRoutine 函数后得到。奇怪的是，true当我像这样在 startRoutine 函数之外记录它时，我得到了。这仍然在功能组件内

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

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

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

如果 count 的值从 0 开始。那么 addCount 函数第一次运行时，它会返回 0 的 count 值，即使期望值应该是 1

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

标签： reactjsreact-nativereact-reduxexporeact-hooks

解决方案

在 Redux 中，一旦 anAction被调度，它不会立即更新 store，它会使用 action 和当前状态调用 reducer，它不会等到 reducer 完成更新状态，同时，你的下一条语句被执行。因此，该值确实会更新，但您会在console语句中获得先前的状态。

您可以查看此文档。

推荐阅读