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

Posted 2023-02-19

【中文标题】在功能组件的函数内反应redux值返回一个周期后的值

【英文标题】：React redux value inside a function of a functional component returns the value a cycle late

【发布时间】：2020-05-15 23:08:03

【问题描述】：

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

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。但是，在将其登录到 startRoutine 函数后，我得到了 false。 奇怪的是，当我像这样在 startRoutine 函数之外记录它时，我得到了 true。这仍然在函数组件中

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

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

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

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

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

世博会^35.0.0 react-redux ^7.1.1 redux-persist ^5.10.0.

【参考方案1】：

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

你可以查看这个doc。

【讨论】：

您好，我确实想过这个问题，但是，当我设置了一个超时功能，在执行 dispatch 功能后等待 1-3 秒，结果还是一样。如何强制我的应用程序等待调度功能？

我看到您有一个 if 语句，因此您可以使用 useEffect

难道 useEffect 不是用于 react 生命周期方法比如 componentDidMount 之类的吗？

是的，您可以只为 started 属性设置一个 useEffect，以便在 started 属性更改时调用它。