Dois-je utiliser useselector au lieu de mapStateToProps

Étant donné que personne ne sait comment répondre, il semble que la meilleure réponse soit que vous ne devriez PAS utiliser useselector lorsque vous avez besoin d'informations dans d'autres endroits que le niveau racine de votre composant. Puisque vous ne savez pas si le composant changera dans le futur, n'utilisez pas du tout useselector.

Si quelqu'un a une meilleure réponse que celle-ci, je changerai la réponse acceptée.

Edit: Certaines réponses ont été ajoutées, mais elles soulignent simplement pourquoi vous ne devriez pas du tout utiliser useselector, jusqu'au jour où les règles des hooks changeront, et vous pourrez également l'utiliser dans un rappel.

Je pense que vous ne comprenez pas ce qu'est le «niveau supérieur». Cela signifie simplement que, à l'intérieur d'un composant fonctionnel, useSelector() ne peut pas être placé dans des boucles, des conditions et des fonctions imbriquées. Cela n'a rien à voir avec le composant racine ou la structure des composants

import { getUsers } from 'actions/user'

class MyComponent extends Component {
  render() {
    // shadowed variable getUsers, now you either rename it
    // or call it like this.props.getUsers
    // or change import to asterisk, and neither option is good
    const { getUsers } = this.props
    // ...
  }
}

const mapDispatchToProps = {
  getUsers,
}

export default connect(null, mapDispatchToProps)(MyComponent)

Si quoi que ce soit, mapStateToPtops est situé à un niveau encore plus élevé qu'un hook call

les règles des crochets rendent très difficile l'utilisation de ce crochet spécifique. Vous devez toujours accéder d'une manière ou d'une autre à une valeur changeante à partir de l'état dans les rappels

Pour être juste, vous n'avez presque jamais à accéder à une valeur changeante dans un rappel. Je ne me souviens plus de la dernière fois que j'en avais besoin. Habituellement, si votre rappel a besoin du dernier état, vous feriez mieux de simplement distribuer une action, puis le gestionnaire de cette action (redux-thunk, redux-saga, redux-observable, etc.) accédera lui-même au dernier état

Ce ne sont que des spécificités des hooks en général (pas seulement useSelector) et il existe des tonnes de façons de le contourner si vous le souhaitez vraiment, par exemple

const MyComponent = () => {
  const data = useSelector(mySelector);
  const latestData = useRef()
  latestData.current = data

  return (
    <button
      onClick={() => {
        setTimeout(() => {
          console.log(latestData.current) // always refers to latest data
        }, 5000)
      }}
    />
  )
}

Quels sont les avantages de l'utilisation du hook en plus d'économiser des lignes de code par rapport à mapStateToProps?

1. Vous gagnez du temps en n'écrivant pas la fonction de connexion chaque fois que vous avez besoin d'accéder au magasin et en le supprimant lorsque vous n'avez plus besoin d'accéder au magasin. Pas de wrappers sans fin dans React devtools
2. Vous avez une distinction claire et aucun conflit entre les accessoires provenant de connect, les accessoires provenant du parent et les accessoires injectés par des wrappers de bibliothèques tierces
3. Parfois, vous (ou d'autres développeurs avec mapStateToProps vous travaillez) choisiriez des noms peu clairs pour les accessoires dans mapStateToProps et vous devrez faire défiler jusqu'à mapStateToProps dans le fichier pour savoir quel sélecteur est utilisé pour cet accessoire spécifique. Ce n'est pas le cas des hooks où les sélecteurs et les variables avec les données qu'ils renvoient sont couplés sur la même ligne
4. En utilisant des hooks, vous bénéficiez des avantages généraux des hooks, dont le plus important est de pouvoir coupler et réutiliser la logique avec état associée dans plusieurs composants.
5. Avec mapStateToProps vous devez généralement gérer mapDispatchToProps qui est encore plus encombrant et plus facile à perdre, en particulier en lisant le code de quelqu'un d'autre (forme objet? Forme fonction? BindActionCreators?). Prop provenant de mapDispatchToProps peut avoir le même nom que son créateur d'action mais une signature différente car il a été remplacé dans mapDispatchToprops . Si vous utilisez un créateur d'action dans un certain nombre de composants et que vous le renommez ensuite, ces composants continueront d'utiliser l'ancien nom provenant des accessoires. La forme de l'objet se brise facilement si vous avez un cycle de dépendance et que vous devez également gérer les noms de variables d'ombrage

.

// bad
const MyComponent = () => {
  if (condition) {
    // can't do this
    const data = useSelector(mySelector);
    console.log(data);
  }

  return null;
}

---

// good
const MyComponent = () => {
  const data = useSelector(mySelector);

  if (condition) {
    console.log(data); // using data in condition
  }

  return null;
}

L'état redux retourné par le hook useSelector peut être transmis n'importe où ailleurs, comme c'est le cas pour mapStateToProps . Exemple: il peut également être transmis à une autre fonction. Seule contrainte étant que les règles de hook doivent être suivies lors de sa déclaration:

1. Il doit être déclaré uniquement dans un composant fonctionnel.

2. Lors de la déclaration, il ne peut être à l'intérieur d'aucun bloc conditionnel. Exemple de code ci-dessous

   export default function CustomPaginationActionsTable(props) {
   //Read state with useSelector.
   const searchCriteria = useSelector(state => {
     return state && state.selectedFacets;
    });
   
   //use the read state in a callback invoked from useEffect hook.
   useEffect( ()=>{
     const postParams = constructParticipantListQueryParams(searchCriteria);
     const options = {
       headers: {
           'Content-Type': 'application/json'
       },
       validateStatus: () => true
     };
     var request = axios.post(PORTAL_SEARCH_LIST_ALL_PARTICIPANTS_URI, postParams, options)
         .then(function(response)
           { 
             if(response.status === HTTP_STATUS_CODE_SUCCESS) {
               console.log('Accessing useSelector hook output in axios callback. Printing it '+JSON.stringify(searchCriteria));
               
             }
                       
           })          
         .catch(function(error) {
         });
   }, []);
   }
   

EDIT: Puisque OP a posé une question spécifique - qui consiste à l'utiliser dans un rappel, je voudrais ajouter un code spécifique.En résumé, je ne vois rien qui nous empêche d'utiliser la sortie hook useSelector dans un rappel. Veuillez consulter l'exemple de code ci-dessous, c'est un extrait de mon propre code qui illustre ce cas d'utilisation particulier.

    function test(displayText) {
       return (<div>{displayText}</div>);
    }

    export function App(props) {
        const displayReady = useSelector(state => {
        return state.readyFlag;
        });

        const displayText = useSelector(state => {
        return state.displayText;
        });

        if(displayReady) {
            return 
            (<div>
                Outer
                {test(displayText)}

            </div>);
        }
        else {
        return null;
        }
    }