我没有通过其中一个减速器让控制台记录我的状态更改

Question

当我分派加载器的一个动作时，当我在 redux 记录器中看到时，reducer 正在改变状态，但是当我分派动作来改变状态时，它不是控制台登录在旁边的行中。

import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import {connect} from 'react-redux';
import {loader} from "../../actions/loaderAction";
import './Loader.css';
function LoaderPage(props) {
let [showloader,setshowloader] = useState(0);

const testfunc = ()=>{
    props.loader(true);
    console.log(props.Loader);
}
useEffect(()=>{
    testfunc();
    // eslint-disable-next-line
},[]);
return (
    <>
    {showloader
    ?
    <div className="loader-comp">
        <div className="animated yt-loader"></div>
        <div className="mask"></div>
    </div>
    :
    ""
    }
    </>
)
}


const mapStateToProps= (state) => (
{
    Loader:state.Loader
}
)

export default connect(mapStateToProps, {
 loader
})(LoaderPage);

我知道 reducer returns 异步的新状态，所以什么时候我应该为 props.Loader 使用 console.log 任何帮助或建议都是有价值的。

Answer 1

尝试使用回调模式

const callbackFunction = () =>  console.log("Some code");

const loader = (option = {}) => {
        if(option.cb){
                option.cb();
        }
};

const option = {};
option.cb = callbackFunction;

loader(option);

Answer 2

当您将空数组作为第二个参数传递给 useEffect 时，意味着代码将仅在挂载时执行。而且您的日志没有反映，因为状态更新不同步。

您希望每次 Loader 更改时执行日志。从函数中删除 console.log。创建另一个 useEffect 来记录您的 Loader 并将 Loader 传递给数组，这意味着您的代码将在 Loader 更改时执行：

  useEffect(()=>{
    console.log(props.Loader);
  },[props.Loader]);

Answer 3

您可以使用 redux 开发工具扩展而不是 console.log 来查看和管理您的状态。它使用简单，构建完美

我没有通过其中一个减速器让控制台记录我的状态更改

I am not getting console logged my state change by one of the reducers

loader

reactjs

redux

react-redux