जब मैं लोडर की एक कार्रवाई भेज रहा हूं, जब मैं रेडक्स लॉगर में देखता हूं तो रेड्यूसर राज्य बदल रहा है लेकिन जब मैंने राज्य को बदलने के लिए कार्रवाई भेजी है तो यह कंसोल लॉग इन नहीं है।

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

मुझे पता है कि रेड्यूसर नए राज्य को अतुल्यकालिक रूप से लौटाता है, इसलिए जब मुझे प्रोप के लिए कंसोल.लॉग का उपयोग करना चाहिए। लोडर कोई भी मदद या सुझाव मूल्यवान है।

0
Alak Creature 17 जिंदा 2021, 18:55

3 जवाब

सबसे बढ़िया उत्तर

जब आप useEffect के दूसरे तर्क के रूप में एक खाली सरणी पास करते हैं, तो इसका मतलब है कि कोड केवल माउंट पर ही निष्पादित होगा। और आपका लॉग प्रतिबिंबित नहीं होता क्योंकि राज्य अद्यतन सिंक नहीं है।

आप चाहते हैं कि लॉग को हर बार Loader परिवर्तनों पर निष्पादित किया जाए। अपने console.log को अपने फ़ंक्शन से हटा दें। अपना Loader लॉग इन करने के लिए एक और useEffect बनाएं और Loader को सरणी में पास करें, जिसका अर्थ है कि आपका कोड Loader परिवर्तनों पर निष्पादित होगा:

  useEffect(()=>{
    console.log(props.Loader);
  },[props.Loader]);
1
buzatto 17 जिंदा 2021, 20:35

आप अपने राज्य को देखने और प्रबंधित करने के लिए कंसोल.लॉग के बजाय redux dev tools एक्सटेंशन का उपयोग कर सकते हैं। इसका उपयोग करना इतना आसान है और पूरी तरह से बनाया गया है

0
Ardalan Nahavandi 17 जिंदा 2021, 20:47

कॉलबैक पैटर्न का उपयोग करने का प्रयास करें

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 जिंदा 2021, 19:05