我没有让一个减速器记录我的状态更改答案

【问题标题】：I am not getting console logged my state change by one of the reducers我没有让一个减速器记录我的状态更改
【发布时间】：2021-01-17 15:55:55
【问题描述】：

当我调度加载程序的操作时，当我在 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 作为 props.Loader 任何帮助或建议都很有价值。

【问题讨论】：

您仅在安装组件时调用该函数（此时我假设 props.Loader 尚未更新）。你再也不会打电话给testfunc()了。
假设动作更新Loader redux 状态，只需将console.log 移出函数即可。当 prop 更改并记录新值时，您的组件应该重新呈现。另外，如果您不在其他地方调用 props.loader，请将其移至您的 useEffect

标签： reactjs redux react-redux loader

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试使用回调模式

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

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

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

loader(option);

【讨论】：