UseReducer और React Context API का उपयोग करते समय दो बार चलने वाला Reducer

मैं एक अजीब परिस्थिति में अपने सिर को एक दीवार में चलाने के लिए रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करके यूजरेड्यूसर और यूज कॉन्टेक्स्ट हुक के साथ चला रहा हूं।

यहाँ मेरा मुख्य स्टोर है।

import React, { createContext, useReducer } from 'react';
import { Reducers } from './Reducers';
import { surveys } from '../../testData.json';

export const context = createContext();
const { Provider } = context;

export const Store = ({ children }) => {
  const [store, dispatch] = useReducer(Reducers, {
    editSurvey: { display: false },
    surveys,
  });
  return <Provider value={{ store, dispatch }}>{children}</Provider>;
};

यहां मेरा रेड्यूसर फ़ंक्शन और मेरे एक्शन प्रकार हैं:

import { Actions } from './Actions';
const { DISPLAY_NEW_SURVEY, HIDE_SURVEY } = Actions;
export const Reducers = (state, action) => {
  const { type, payload } = action;
  console.log(state, action);
  switch (type) {
    case DISPLAY_NEW_SURVEY:
      return { ...state, editSurvey: { display: true } };
    case HIDE_SURVEY:
      return { ...state, editSurvey: { display: false } };
    default:
      return state;
  }
};

export const Actions = {
  DISPLAY_NEW_SURVEY: 'DISPLAY_NEW_SURVEY',
  HIDE_SURVEY: 'HIDE_SURVEY',
};

मेरे पास मेरी संपादन संपत्ति के अंदर एक प्रदर्शन संपत्ति है जिसका उपयोग प्रतिक्रिया पोर्टल को सशर्त रूप से प्रस्तुत करने के लिए किया जाता है, नीचे देखें:

import React, { useContext } from 'react';
import { EditSurveyPortal } from '../EditSurvey/EditSurveyPortal';
import { context } from '../../store/Store';

export const NavItem = ({ name, NavImage }) => {
  const { dispatch } = useContext(context);
  return (
    <div
      id={name}
      style={{ cursor: 'pointer' }}
      onClick={() => {
        dispatch({ type: 'DISPLAY_NEW_SURVEY' });
      }}
    >
      <NavImage alt={name} width={10} height={10} />
      <EditSurveyPortal />
    </div>
  );
};

import React, { useContext } from 'react';
import { createPortal } from 'react-dom';
import { context } from '../../store/Store';
import { EditSurvey } from './EditSurvey';

export const EditSurveyPortal = () => {
  const {
    store: {
      editSurvey: { display },
    },
    dispatch,
  } = useContext(context);
  return display
    ? createPortal(
        <div className="absolute top-0 left-0 w-screen h-screen z-10 flex justify-center items-center bg-gray-400 bg-opacity-50">
          <EditSurvey />
        </div>,
        document.getElementById('root'),
      )
    : null;
};

और यहाँ वास्तविक संपादन सर्वेक्षण घटक है:

import React from 'react';
import { Card, CardHeader } from '../Utility/Card';
import { Close } from '../Images/Close';

export const EditSurvey = ({ dispatch }) => {
  return (
    <Card>
      <CardHeader className="flex justify-between align-center">
        <div className="inline-block relative rounded">
          <span className="absolute top-0 l-0 bg-gray-200 text-gray-800 rounded-l px-2 py-1">
            Title
          </span>
          <input type="text" className="rounded p-1" />
        </div>
        <div
          className="text-gray-800"
          style={{ cursor: 'pointer' }}
          onClick={() => {
            dispatch({ type: 'HIDE_SURVEY' });
          }}
        >
          <Close width={8} height={8} />
        </div>
      </CardHeader>
    </Card>
  );
};

मेरी समस्या यह है कि जब मैं पोर्टल पर बंद करें बटन पर क्लिक करता हूं, तो यह HIDE_SURVEY भेजता है और फिर तुरंत DISPLAY_NEW_SURVEY भेजता है:

मैं अपने जीवन के लिए यह पता नहीं लगा सकता। किसी भी तरह की सहायता का स्वागत किया जाएगा।

धन्यवाद!