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 工具包操作不知何故不同步的主要内容,如果未能解决你的问题,请参考以下文章

好用的同步软件

next-redux-wrapper 服务器不与客户端同步?

无法合成信号

Class`成员不知何故不情愿地改变

如何在 Redux 中完成另一个同步操作时分派一个操作

在 React 中使用 preloadedState 进行测试:在函数中手动导入存储时,redux 存储不同步