जब मैं लोडर की एक कार्रवाई भेज रहा हूं, जब मैं रेडक्स लॉगर में देखता हूं तो रेड्यूसर राज्य बदल रहा है लेकिन जब मैंने राज्य को बदलने के लिए कार्रवाई भेजी है तो यह कंसोल लॉग इन नहीं है।
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);
मुझे पता है कि रेड्यूसर नए राज्य को अतुल्यकालिक रूप से लौटाता है, इसलिए जब मुझे प्रोप के लिए कंसोल.लॉग का उपयोग करना चाहिए। लोडर कोई भी मदद या सुझाव मूल्यवान है।
3 जवाब
जब आप useEffect
के दूसरे तर्क के रूप में एक खाली सरणी पास करते हैं, तो इसका मतलब है कि कोड केवल माउंट पर ही निष्पादित होगा। और आपका लॉग प्रतिबिंबित नहीं होता क्योंकि राज्य अद्यतन सिंक नहीं है।
आप चाहते हैं कि लॉग को हर बार Loader
परिवर्तनों पर निष्पादित किया जाए। अपने console.log
को अपने फ़ंक्शन से हटा दें। अपना Loader
लॉग इन करने के लिए एक और useEffect
बनाएं और Loader
को सरणी में पास करें, जिसका अर्थ है कि आपका कोड Loader
परिवर्तनों पर निष्पादित होगा:
useEffect(()=>{
console.log(props.Loader);
},[props.Loader]);
आप अपने राज्य को देखने और प्रबंधित करने के लिए कंसोल.लॉग के बजाय redux dev tools एक्सटेंशन का उपयोग कर सकते हैं। इसका उपयोग करना इतना आसान है और पूरी तरह से बनाया गया है
कॉलबैक पैटर्न का उपयोग करने का प्रयास करें
const callbackFunction = () => console.log("Some code");
const loader = (option = {}) => {
if(option.cb){
option.cb();
}
};
const option = {};
option.cb = callbackFunction;
loader(option);
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।