Fonctions d'assistance pour l'utilisation des Redux Dispatch/React Hooks

Question

J'ai plusieurs composants qui y sont programmés à plusieurs reprises. Je souhaite utiliser une fonction d'assistance pour importer et utiliser dans plusieurs composants. Ce qui est exaspérant, c’est que ce n’est pas facile, du moins pour moi. J'ai beaucoup lu à ce sujet, mais je ne peux pas m'y identifier.

Le problème que j'ai rencontré était react-dom.development.js:16227 Erreur non détectée : appel de hook non valide. Les hooks ne peuvent être appelés qu’à l’intérieur du corps d’un composant fonctionnel. Cela peut se produire pour l'une des raisons suivantes : Vous enfreignez peut-être les règles de Hooks

Alors comment appeler la planification dans la fonction d'assistance ? Je pense que les crochets personnalisés pourraient être la voie à suivre - j'y jetterai un œil maintenant.

Exemple de composants rationalisés :

...imports...    
import { helperCall } from '../../assets/helperFunctions/helperCall';
    export default function CompExamp() {
        
          ...variables...
        
          return (
        <div className="min-w-0 flex-1"
          onClick={(e) => helperCall(e, searchText, searchType)}
        >
          <span className="absolute inset-0" aria-hidden="true" />
          <p className="text-sm font-medium text-black">Target</p>
          <p className="text-base text-gray-700">test</p>
        </div>
      )
}

Fonctions auxiliaires simplifiées :

import React from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults';
import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults';
import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults';


export function helperCall(e: any, searchText: string, searchType: string) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  e.preventDefault();
  e.stopPropagation();

  if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') {
    return;
  }
  if (searchType === 'a') {
    dispatch(updateASearchTerm({ searchTerm, searchType }));
    dispatch(loadASearchResults({ searchTerm, searchType }));
    navigate('/page-a');
  } else if (searchType === 'b') {
    dispatch(updateBSearchTerm({ searchTerm, searchType }));
    dispatch(loadBSearchResults({ searchTerm, searchType }));
    navigate('/page-b');
  } else if (searchType === 'c') {
    dispatch(updateCSearchTerm({ searchTerm, searchType }));
    dispatch(loadCSearchResults({ searchTerm, searchType }));
    navigate('/page-c');
  }
}

Answer 1

Vous ne pouvez utiliser les hooks React que dans les composants fonctionnels React, mais vous pouvez transmettre des fonctions à des fonctions d'assistance comme celle-ci :

import { helperCall } from "../../assets/helperFunctions/helperCall";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

export default function CompExamp() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  /* variables  */

  return (
    
 helperCall(e, searchText, searchType, dispatch, navigate)}
    >
      
      
Target
      
test
    
  );
}

import React from 'react';

import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults';
import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults';
import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults';


export function helperCall(e: any, searchText: string, searchType: string, dispatch: Function, navigate: Function) {
  e.preventDefault();
  e.stopPropagation();

  if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') {
    return;
  }
  if (searchType === 'a') {
    dispatch(updateASearchTerm({ searchTerm, searchType }));
    dispatch(loadASearchResults({ searchTerm, searchType }));
    navigate('/page-a');
  } else if (searchType === 'b') {
    dispatch(updateBSearchTerm({ searchTerm, searchType }));
    dispatch(loadBSearchResults({ searchTerm, searchType }));
    navigate('/page-b');
  } else if (searchType === 'c') {
    dispatch(updateCSearchTerm({ searchTerm, searchType }));
    dispatch(loadCSearchResults({ searchTerm, searchType }));
    navigate('/page-c');
  }
}