Ketika saya mengirim tindakan pemuat, peredam mengubah status ketika saya melihat di redux logger tetapi itu bukan konsol yang masuk di baris di sebelah ketika saya telah mengirim tindakan untuk mengubah status.

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);

Saya tahu peredam mengembalikan status baru secara tidak sinkron, jadi ketika saya harus menggunakan console.log untuk props.Loader Bantuan atau saran apa pun sangat berharga.

0
ANKUSH KUMAR 17 Januari 2021, 18:55

3 jawaban

Jawaban Terbaik

Saat Anda meneruskan array kosong sebagai argumen kedua ke useEffect berarti kode hanya akan dieksekusi saat dipasang. Dan log Anda tidak mencerminkan karena pembaruan status tidak disinkronkan.

Anda ingin log dieksekusi setiap ada perubahan Loader. Hapus console.log Anda dari fungsi Anda. Buat useEffect lain untuk mencatat Loader Anda dan teruskan Loader ke array, yang berarti kode Anda akan dieksekusi pada Loader perubahan:

  useEffect(()=>{
    console.log(props.Loader);
  },[props.Loader]);
1
buzatto 17 Januari 2021, 17:35

Anda dapat menggunakan ekstensi alat pengembang redux alih-alih console.log untuk melihat dan mengelola status Anda. Sangat mudah digunakan dan dibuat dengan sempurna

0
Ardalan Nahavandi 17 Januari 2021, 17:47

Coba gunakan pola panggilan balik

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

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

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

loader(option);
-1
Vipul Kumar 17 Januari 2021, 16:05