Redux - Intégrer React

Dans les chapitres précédents, nous avons appris ce qu'est Redux et comment cela fonctionne. Vérifions maintenant l'intégration de view part avec Redux. Vous pouvez ajouter n'importe quelle couche de vue à Redux. Nous discuterons également de la bibliothèque de réaction et de Redux.

Disons si divers composants de réaction doivent afficher les mêmes données de différentes manières sans les passer comme accessoire à tous les composants, du composant de niveau supérieur à la descente. Il serait idéal de le stocker en dehors des composants de réaction. Parce que cela permet une récupération plus rapide des données, car vous n'avez pas besoin de transmettre les données à différents composants.

Voyons comment cela est possible avec Redux. Redux fournit le package react-redux pour lier les composants react avec deux utilitaires comme indiqué ci-dessous -

• Provider
• Connect

Le fournisseur rend le magasin disponible pour le reste de l'application. La fonction de connexion aide le composant à réagir pour se connecter au magasin, en répondant à chaque changement intervenant dans l'état du magasin.

Jetons un œil à la root index.js fichier qui crée un magasin et utilise un fournisseur qui active le magasin vers le reste de l'application dans une application react-redux.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';
import App from './components/app'
import './index.css';

const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
   applyMiddleware(thunk)
)
render(
   <Provider store = {store}>
      <App />
   </Provider>,
   document.getElementById('root')
)

Chaque fois qu'une modification se produit dans une application react-redux, mapStateToProps () est appelée. Dans cette fonction, nous spécifions exactement quel état nous devons fournir à notre composant de réaction.

Avec l'aide de la fonction connect () expliquée ci-dessous, nous connectons l'état de ces applications pour réagir au composant. Connect () est une fonction d'ordre élevé qui prend le composant comme paramètre. Il effectue certaines opérations et renvoie un nouveau composant avec des données correctes que nous avons finalement exportées.

Avec l'aide de mapStateToProps (), nous fournissons ces états de magasin comme accessoire à notre composant de réaction. Ce code peut être encapsulé dans un composant conteneur. Le motif est de séparer les problèmes tels que la récupération des données, les problèmes de rendu et la réutilisabilité.

import { connect } from 'react-redux'
import Listing from '../components/listing/Listing' //react component
import makeApiCall from '../services/services' //component to make api call

const mapStateToProps = (state) => {
   return {
      items: state.items,
      isLoading: state.isLoading
   };
};
const mapDispatchToProps = (dispatch) => {
   return {
      fetchData: () => dispatch(makeApiCall())
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Listing);

La définition d'un composant pour effectuer un appel api dans le fichier services.js est la suivante -

import axios from 'axios'
import { itemsLoading, itemsFetchDataSuccess } from '../actions/actions'

export default function makeApiCall() {
   return (dispatch) => {
      dispatch(itemsLoading(true));
      axios.get('http://api.tvmaze.com/shows')
      .then((response) => {
         if (response.status !== 200) {
            throw Error(response.statusText);
         }
         dispatch(itemsLoading(false));
         return response;
      })
      .then((response) => dispatch(itemsFetchDataSuccess(response.data)))
   };
}

La fonction mapDispatchToProps () reçoit la fonction de répartition en tant que paramètre et vous renvoie les accessoires de rappel sous forme d'objet simple que vous passez à votre composant de réaction.

Ici, vous pouvez accéder à fetchData en tant que accessoire dans votre composant de liste de réaction, qui distribue une action pour effectuer un appel d'API. mapDispatchToProps () est utilisé pour distribuer une action à stocker. Dans react-redux, les composants ne peuvent pas accéder directement au magasin. Le seul moyen est d'utiliser connect ().

Comprenons comment fonctionne le react-redux à travers le diagramme ci-dessous -

STORE - Stocke tout l'état de votre application en tant qu'objet JavaScript

PROVIDER - Rend les magasins disponibles

CONTAINER - Obtenez l'état des applications et fournissez-le comme accessoire aux composants

COMPONENT - L'utilisateur interagit via le composant de vue

ACTIONS - Provoque un changement en magasin, cela peut ou non changer l'état de votre application

REDUCER - Seul moyen de changer l'état de l'application, d'accepter l'état et l'action et de renvoyer l'état mis à jour.

Cependant, Redux est une bibliothèque indépendante et peut être utilisée avec n'importe quelle couche d'interface utilisateur. React-redux est la liaison officielle Redux, UI avec le React. De plus, cela encourage une bonne structure d'application Redux. React-redux implémente en interne l'optimisation des performances, de sorte que le nouveau rendu des composants se produit uniquement lorsque cela est nécessaire.

Pour résumer, Redux n'est pas conçu pour écrire le code le plus court et le plus rapide. Il est destiné à fournir un conteneur de gestion d'état prévisible. Cela nous aide à comprendre quand un certain état a changé ou d'où proviennent les données.