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

问题描述

当我调度加载器的一个动作时，当我在 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异步返回新状态，所以当我应该使用console.log for props.Loader 任何帮助或建议都很有价值。

解决方法

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

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

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

,

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

,

尝试使用回调模式

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

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

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

loader(option);