मेरे पास एक Next.js ऐप है जो यादृच्छिक YouTube वीडियो चलाता है। ऐप के लिए मेरा राज्य कुछ इस तरह दिखता है (एक Redux स्टोर में):

const state = {
    entities: {
        videos: {
            'vidId1': {
                id: 'vidId1',
                title: 'Video 1'
            },
            'vidId2': {
                id: 'vidId2',
                title: 'Video 2'
            },
            'vidId3': {
                id: 'vidId3',
                title: 'Video 3'
            }
        }
    },
    uncategorized: {
        isFetching: false,
        hasNextPage: false,
        nextIndex: 0,
        items: [
            'vidId1',
            'vidId2',
            'vidId3'
        ]
    }
};

मेरे पास मेरा होम पेज है जो निम्न जैसा दिखता है:

// index.js
const Index = () => {
    return (
        <div>
            <h1>Home Page</h1>
            <RandomVideoButton />
        </div>
    );
};

<RandomVideoButton /> /random से लिंक करता है। यह पृष्ठ राज्य से अगली वीडियो आईडी प्राप्त करता है और /videos?id={id} पर रीडायरेक्ट करता है। यह कुछ इस तरह दिखता है:

// random.js
const RandomVideo = () => {
    // Get next video ID
    const nextVideoId = useSelector(state => state.uncategorized.items[state.uncategorized.nextIndex]);

    // Redirect to next video
    const router = useRouter();
    router.push({
        pathname: '/videos',
        query: { id: nextVideoId }
    });

    return (
        <div>Loading video...</div>
    );
};

एक बार जब मैं /videos?id={id} पर आ जाउंगा, तो वह पेज state.entities.videos से वीडियो लोड कर देगा और फिर state.uncategorized.nextIdnex को अपडेट कर देगा। यहीं समस्या उत्पन्न होती है। जब मैं राज्य में अगले वीडियो इंडेक्स को अपडेट करने के लिए कार्रवाई भेजता हूं, तो मैं एक अनंत री-रेंडर लूप में फंस जाता हूं। यह watch.js जैसा दिखता है:

const WatchVideo = () => {
    // Get video ID from URL query
    const router = useRouter();
    const videoId = router.query.id;

    // Get video
    const { video, activeVideos } = useSelector(state => state.entities.videos[videoId]);

    // Update video index
    const dispatch = useDispatch();
    dispatch({ type: 'INCREMENT_NEXT_INDEX' });

    return (
        <div className="col-12 col-lg-8 col-xl-9">
            {video &&
                <main>
                    <div className="embed-responsive embed-responsive-16by9">
                        <iframe id="player" src={'https://www.youtube-nocookie.com/embed/' + video.id}></iframe>
                    </div>
                    <h1>{video.title}</h1>
                </main>
            }
        </div>
    );
};

मेरी समस्या यह है कि मुझे यकीन नहीं है कि राज्य में अगले वीडियो इंडेक्स को अपडेट करने में सक्षम होने के बावजूद इसे होने से कैसे रोका जाए।

0
user4181107 27 फरवरी 2020, 04:13

1 उत्तर

आपको प्रतिक्रिया उपयोग प्रभाव हुक के अंदर प्रेषण/रूटिंग का उपयोग करना चाहिए। और आप videoId को useEffect निर्भरता के रूप में उपयोग कर सकते हैं।

1
Harish Dhami 27 फरवरी 2020, 04:25
इस उत्तर ने मुझे सही दिशा में इंगित किया। हालांकि, मैं अभी भी useSelector या useDispatch का उपयोग useEffect के अंदर नहीं कर सका। मुझे बदलना पड़ा कि मेरा घटक कैसे स्थापित किया गया था। मुझे अपने घटक को withRouter (नेक्स्ट.जेएस से) के साथ लपेटना पड़ा और मुझे useSelector और useDispatch (Redux से) के बजाय connect का उपयोग करना पड़ा। लेकिन अब ब्राउज़र में पीछे/आगे क्लिक करना अपेक्षा के अनुरूप काम नहीं करता है। वापस क्लिक करना मुझे पिछले वीडियो पर ले जाता है, लेकिन मैं आगे बढ़ने के लिए क्लिक नहीं कर सकता।
 – 
user4181107
27 फरवरी 2020, 18:08
आप राज्य प्रबंधन के लिए useReducer हुक का उपयोग कर सकते हैं जो आसानी से रूटिंग और useEffect हुक के साथ काम करना चाहिए। useReducer से डिस्पैच निकाला जा सकता है।
 – 
Harish Dhami
27 फरवरी 2020, 21:15