时间戳

首页 > 解决方案 > 我没有让一个减速器记录我的状态更改

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

问题描述

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

标签： reactjsreduxreact-reduxloader

解决方案

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

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

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

推荐阅读