Redux 工具包操作不知何故不同步
Posted
技术标签:
【中文标题】Redux 工具包操作不知何故不同步【英文标题】:Redux toolkit action is somehow not sync 【发布时间】:2021-11-30 22:54:14 【问题描述】:我正在使用 redux 工具包 createSlice:
export const counter = createSlice(
...
reducers:
increment: (state, action) => state + 1,
...
);
export const increment = counter.actions;
在组件中使用:
import React, useEffect from "react";
import connect from "react-redux";
import increment as _increment from "../slices/counter";
const Counter = ( counter, increment ) =>
useEffect(() =>
console.log(counter); // Let's assume that counter=k
increment();
console.log(counter); // I think that here counter should be equal k+1, but it still is k as if increment is async
, []);
return <div>Counter: counter</div>;
;
const mapStateToProps = (state) => (
counter: state.counter
);
const mapDispatchToProps =
increment: _increment
;
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
我希望增量函数是同步的,以便在执行它后的下一行 redux 存储将被更改。在我的示例中,我希望第一个 console.log 返回 k
和第二个 k+1
。为什么会发生这种情况。有没有办法等到商店发生变化?
这里是sandbox
【问题讨论】:
这能回答你的问题吗? ***.com/questions/54069253/… 【参考方案1】:它工作正常,我添加了一个按钮来调用 increment() 方法,一旦点击,我想你认为它不起作用,因为 useEffect 方法中存在对 increment 方法的调用,一旦组件加载“无依赖关系”就会触发"
对于您的沙箱,尝试更改代码中的内容以重新渲染 Counter 组件,您将看到计数器递增
Your SandBox Fork
【讨论】:
以上是关于Redux 工具包操作不知何故不同步的主要内容,如果未能解决你的问题,请参考以下文章