Comment accéder à l'état du magasin Redux dans Action Creators : Direct vs Redux Thunk ?

Accès à l'état du magasin Redux dans les créateurs d'actions

Lors de la création d'actions dans Redux, vous pouvez rencontrer le besoin d'accéder à l'état du magasin global. Cet article explorera deux approches pour y parvenir : accéder à l'état directement via une variable de magasin importée ou utiliser un middleware Redux Thunk.

Accéder directement à l'état

<code class="javascript">import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}</code>

Cette approche repose sur le fait que le magasin est un singleton exporté à partir d'un module. Bien que techniquement fonctionnel, il n'est pas recommandé car il complique le rendu côté serveur où des magasins distincts sont requis pour chaque requête.

Utilisation de Redux Thunk

<code class="javascript">export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}</code>

Utilisation de Redux Le middleware Thunk permet d'accéder à l'état du magasin via la fonction getState. Cette approche est préférée car elle fonctionne de manière transparente dans les environnements client et serveur.

Considérations

Il existe des opinions divergentes sur l'utilisation de getState dans les créateurs d'action. Certains soutiennent que cela devrait être limité aux scénarios dans lesquels les données mises en cache sont vérifiées ou le statut d'authentification est vérifié. D'autres soutiennent qu'il est acceptable d'utiliser getState dans thunks.

En fin de compte, la meilleure approche dépend des besoins spécifiques de votre application. Même si les actions devraient idéalement être concises, il existe des cas où l'accès à l'état directement dans les créateurs d'actions peut être justifié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!