Comment Créer Une Application React Alimentée Par Redux

Le problème que nous résolvons

Dans de nombreux cas, lorsque nous voulons créer une petite application, nous pouvons avoir des composants qui déclarent et utilisent leur propre état. Et dans quelques cas, un composant peut vouloir partager l'état avec ses enfants immédiats.

Nous pouvons gérer ces situations simplement en déclarant des états localement dans un composant - et peut-être transmettre l'état à ses enfants sous la forme d'accessoires si nécessaire (ce qui est également connu sous le nom de forage d'accessoires).

Mais si votre application grandit, vous devrez peut-être transmettre l'état à un enfant qui peut se trouver à plusieurs niveaux dans la hiérarchie. Vous devrez peut-être également utiliser un état commun entre les composants frères.

Bien sûr, dans le cas d'un partage d'état entre des composants frères, nous pouvons déclarer l'état dans leurs parents, puis transmettre l'état à leurs enfants par forage d'hélice. Mais cela n'est pas toujours faisable et a ses propres inconvénients que nous verrons dans un instant.

Considérez simplement le schéma suivant :

Groupe-49

Il s'agit d'une représentation schématique d'une structure de fichier de composant dans une application React typique.

Disons que nous devons partager un état commun entre l'enfant 5 et l'enfant 6. Dans ce cas, nous pouvons très bien déclarer un état dans leur parent (c'est-à-dire l'enfant 2) et transmettre l'état aux deux enfants (5 et 6) .

Tout va bien à partir de maintenant. Mais que se passe-t-il si nous devons avoir le même élément d'état dans Child 3 ? Dans ce cas, nous aurions besoin de déclarer l'état dans le parent/grand-parent commun des enfants 5, 6 et 3, c'est-à-dire le composant App.

De même, que se passe-t-il si nous voulons partager un état entre les enfants 4, 11 et 10 qui sont éloignés les uns des autres dans l'arbre ? Nous aurions à nouveau besoin de créer l'état dans le composant App, puis d'effectuer plusieurs niveaux de forage d'accessoires pour transmettre l'état de App à ces composants.

Et au fur et à mesure que le temps passe et que notre application grandit, elle commencera à rendre notre composant App ou tout autre composant parent commun encombré de déclarations d'état inutiles. Ces déclarations ne sont pas utilisées directement par ces composants mais sont utilisées par certains de leurs enfants éloignés.

Inconvénients du forage en plusieurs étapes

Il y a principalement deux inconvénients avec le forage à plusieurs niveaux. Elles sont:

Gonflement inutile des composants : comme indiqué ci-dessus, à mesure que notre application grandit, certains composants parents communs peuvent être gonflés avec des déclarations d'état inutiles. Et ces composants peuvent ne pas utiliser directement ces déclarations, mais ils peuvent être utilisés par certains de leurs enfants distants. Certains autres composants peuvent également être gonflés et agissent simplement comme des passeurs d'accessoires vers un composant enfant. Cela affectera également négativement la lisibilité du code.
Re-rendu inutile : Le re-rendu inutile est un grand non non pour une application côté client. Les re-rendus inutiles peuvent rendre une application lente, lente, insensible et donner une mauvaise expérience utilisateur. Dans React, les rendus sont causés par des changements d'état ou d'accessoire, entre autres raisons. Ainsi, si un composant n'utilise pas réellement d'état et n'agit que comme un passage du parent à l'enfant pour les accessoires, il peut également être restitué inutilement lorsque l'état/les accessoires changent. Voir l'image ci-dessous pour mieux comprendre

Groupe-52-1

La solution à ce problème

C'est pourquoi nous utilisons une application de gestion d'état comme Redux ou MobX pour gérer les scénarios de gestion d'état ci-dessus de manière plus uniforme et efficace.

Dans ce type de solutions de gestion d'état comme Redux, nous pouvons créer un état global et le mettre dans un magasin. Quel que soit le composant nécessitant un état de ce magasin, vous pouvez facilement l'obtenir en vous abonnant au magasin. De cette façon, nous pouvons nous débarrasser des deux inconvénients ci-dessus.

Désencombrement des composants : obtenir l'état à la demande du composant qui l'utilise "réellement" peut désencombrer un grand nombre de nos composants dans une large mesure en supprimant tous les perçages d'accessoires inutiles.
Finis les re-rendus inutiles : comme nous n'avons pas de composants qui agissent simplement comme passeur d'accessoires, nous évitons également les re-rendus inutiles de ces composants. Seuls les composants qui utilisent une partie de l'état global sont restitués lorsque l'état change, ce qui est un comportement souhaité.

Ce que vous apprendrez ici

Dans ce didacticiel, vous apprendrez à configurer votre propre application React alimentée par Redux. Nous allons créer une application de réaction et configurer redux pour pouvoir gérer l'état globalement afin que n'importe quel composant puisse accéder à n'importe quelle partie de l'état (d'où le nom d'application de réaction alimentée par redux). Certaines des autres alternatives de redux que l'on peut essayer sont MobX, Zustand, etc., mais pour cet article, nous utiliserons redux.

Nous verrons comment créer la boutique et la connecter à l'application. Nous verrons également comment écrire des actions et les répartir sur les interactions des utilisateurs. Ensuite, nous verrons comment créer des réducteurs et mettre à jour le magasin, lire le magasin à partir d'autres composants qui sont des enfants d'App, et bien plus encore.

Je fournirai également tous les extraits de code importants en cours de route afin que vous puissiez rapidement lancer l'application au fur et à mesure que vous lisez et codez.

Pour vous donner un aperçu au début, voici ce que nous allons construire à la fin :

finalAppDemo

Nous allons créer une application de base où nous pouvons ajouter et supprimer des articles dans un panier. Nous gérerons les changements d'état dans le magasin Redux et afficherons les informations dans l'interface utilisateur.

Avant de commencer

Avant de poursuivre ce didacticiel, vous devez vous familiariser avec le magasin Redux, les actions et les réducteurs.

Si ce n'est pas le cas, vous pouvez parcourir mon dernier article que j'ai écrit sur Redux (si vous ne l'avez pas encore fait) : Qu'est-ce que Redux ? Magasin, actions et réducteurs expliqués pour les débutants .

Cela vous aidera à comprendre l'article actuel. Dans ce tutoriel précédent, j'ai essayé d'expliquer les principes/concepts fondamentaux de Redux. J'ai couvert ce qu'est le magasin, quelles sont les actions et comment fonctionnent les réducteurs. Je discute également de ce qui rend Redux prévisible avec un exemple.

moi-moche-les-minions

Configuration initiale du code

Mettons en place tout ce dont nous avons besoin pour notre projet. Suivez simplement ces étapes et vous serez opérationnel en un rien de temps.

1. Créez une application React avec la commande create-react-app

npx create-react-app react-app-with-redux

2. Allez dans le dossier nouvellement créé

Tapez simplement cette commande pour accéder au nouveau dossier :

cd react-app-with-redux

3. Installez Redux et les bibliothèques react-redux

Vous pouvez installer Redux et react-redux comme ceci :

npm install redux react-redux

4. Exécutez l'application

Vous pouvez exécuter votre nouvelle application avec la commande suivante :

npm start

Comment créer l'application principale

5. Comment créer le réducteur

Pour créer un réducteur, créez d'abord un dossier à l'intérieur srcnommé actionTypes. Créez ensuite un fichier à l'intérieur nommé actionTypes.js. Ce fichier contiendra toutes les actions que l'application traitera.

Ajoutez les lignes suivantes dans actionTypes.js:

export const ADD_ITEM = "ADD_ITEM";
export const DELETE_ITEM = "DELETE_ITEM";

Étant donné que notre application aura la fonctionnalité d'ajouter et de supprimer des éléments, nous avons besoin des deux types d'action ci-dessus.

Créez ensuite un dossier à l'intérieur du fichier srcappelé reducerset créez-y un nouveau fichier nommé cartReducer.js. Ce fichier contiendra toute la logique du réducteur liée au composant du panier .

Remarque : Nous créerons la vue/l'interface utilisateur à l'étape 8, alors attendez pour cela.

Ajoutez les lignes suivantes dans cartReducer.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const initialState = {
  numOfItems: 0,
};

export default const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems + 1,
      };

    case DELETE_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems - 1,
      };
    default:
      return state;
  }
};

Comme nous en avons discuté dans mon tutoriel précédent , nous avons créé un état initial pour l'application et l'avons affecté au paramètre par défaut de statedans la cartReducerfonction.

Cette fonction active le type d'action envoyée. Ensuite, selon le cas correspondant au type d'action, il apporte les modifications nécessaires à l'état et renvoie une nouvelle instance de l'état mis à jour.

Si aucun des types d'action ne correspond, l'état est renvoyé tel quel.

Enfin, nous effectuons une exportation par défaut de la cakeReducerfonction pour l'utiliser dans le processus de création de la boutique.

6. Comment créer le magasin et le fournir à l'application

Créez un fichier à l'intérieur srcavec le nom store.jset créez le magasin en utilisant cette commande :

const store = createStore()

Ajoutez les lignes suivantes dans store.js:

import { createStore } from "redux";
import { cartReducer } from "./reducers/cartReducer";

const store = createStore(cartReducer);

export default store;

Il est maintenant temps de fournir ceci storeau Appcomposant. Pour cela, nous utiliserons la <Provider>balise que nous recevons de la react-reduxbibliothèque.

Nous encapsulons l'ensemble du Appcomposant dans la <Provider>balise en utilisant la syntaxe suivante :

// rest of the code ...

<Provider store={store}>
        <div>App Component</div>
        // child components of App/ other logic
</Provider>

// rest of the code ...

En enveloppant le Appcomposant à l'intérieur de la <Provider>balise, tous les composants enfants de Appauront accès au store. Vous pouvez lire mon article précédent sur Qu'est-ce que Redux ? Magasin, actions et réducteurs expliqués pour les débutants pour en savoir plus.

En continuant avec App.js, ajoutez les lignes suivantes au fichier :

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <div>App Component</div>
    </Provider>
  );
}

export default App;

7. Créez les actions

Créez maintenant un dossier à l'intérieur srcappelé actionset créez un fichier à l'intérieur appelé cartAction.js. Nous allons ajouter ici toutes les actions à dispatcher sur certaines interactions utilisateur.

Ajoutez les lignes suivantes dans le cartAction.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const addItem = () => {
  return {
    type: ADD_ITEM,
  };
};

const deleteItem = () => {
  return {
    type: DELETE_ITEM,
  };
};

export { addItem, deleteItem };

Dans le code ci-dessus, nous avons créé deux créateurs d'action (fonctions JS pures qui renvoient un actionobjet) appelés addItem()et deleteItem(). Les deux créateurs d'action renvoient actiondes objets avec un fichier type.

Remarque : Chaque actionobjet doit avoir une valeur unique type. Parallèlement, toute donnée supplémentaire transmise avec l'objet d'action est facultative et dépendra de la logique utilisée pour mettre à jour lestate

8. Comment créer la vue/UI

Maintenant que nous avons créé toutes les entités requises telles que le magasin, les actions et les réducteurs, il est temps de créer les éléments de l'interface utilisateur.

Créez un componentdossier à l'intérieur srcet un Cart.jsfichier à l'intérieur. Ajoutez les lignes suivantes à l'intérieur Cart.js:

import React from "react";

const Cart = () => {
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Ajoutez ce Cartcomposant dans le App.jsfichier :

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";
import Cart from "./component/Cart";

function App() {
  return (
    <Provider store={store}>
      <Cart />
    </Provider>
  );
}

export default App;

Juste pour le rendre un peu présentable, j'ai ajouté un peu de style de base App.csscomme suit :

button {
  margin: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #fff;
  padding: 23px 50px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 0px;
  cursor: pointer;
}
.green {
  background-color: rgb(6, 172, 0);
}
.red {
  background-color: rgb(221, 52, 66);
}
.red:disabled {
  background-color: rgb(193, 191, 191);
  cursor: not-allowed;
}
.cart {
  text-align: center;
}

Voici à quoi ressemble l'interface utilisateur à partir de maintenant :

Capture d'écran-2022-05-20-at-20.01.01

9. Comment lire et accéder au magasin en utilisant le `useSelector`crochet

useSelectorest un hook fourni par la bibliothèque react-redux qui nous aide à lire le storeet son(ses) contenu(s).

Importez le crochet depuis react-reduxet utilisez la syntaxe suivante pour lire le magasin avec le useSelectorcrochet :

import { useSelector } from "react-redux";
// rest of the code
const state = useSelector((state) => state);

// rest of the code

Après avoir ajouté le useSelectorcrochet, votre Cart.jsfichier ressemblera à ceci :

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const state = useSelector((state) => state);
  console.log("store", state);
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

La journalisation de l'état par la console nous donnera l'état initial que nous avons défini dans le fichier du réducteur à l'étape 5.

Capture d'écran-2022-05-21-at-01.10.28

10. Comment envoyer une action sur un clic de bouton avec le `useDispatch`crochet

La bibliothèque react-redux nous donne un autre crochet appelé le useDispatchcrochet. Cela nous aide à répartir les actions ou les créateurs d'actions qui, à leur tour, renvoient des actions. La syntaxe est la suivante :

const dispatch = useDispatch();

dispatch(actionObject or calling the action creator);

Ainsi, l'ajout d'un répartiteur dans notre Cart.jsfera finalement ressembler le fichier à ceci :

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addItem, deleteItem } from "../actions/cartAction";

const Cart = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div className="cart">
      <h2>Number of items in Cart: {state.numOfItems}</h2>
      <button
        onClick={() => {
          dispatch(addItem());
        }}
      >
        Add Item to Cart
      </button>
      <button
        disabled={state.numOfItems > 0 ? false : true}
        onClick={() => {
          dispatch(deleteItem());
        }}
      >
        Remove Item to Cart
      </button>
    </div>
  );
};

export default Cart;

Notez comment, en cliquant sur le bouton Ajouter un article au panier , nous sommes dispatchle créateur de l'action addItem()que nous avons créé à l'étape no. sept.

De même, en cliquant sur le bouton Supprimer l'article du panier , nous envoyons le créateur de l'action avec deleteItem().

La statevariable stocke l'état de l'application, qui est essentiellement un objet avec une clé numOfItems. Nous state.numOfItemsdonne donc la valeur actuelle du nombre d'articles dans le magasin.

Nous affichons ces informations dans la vue de la ligne <h2>Number of items in Cart: {state.numOfItems}</h2>.

Pour creuser un peu plus, lorsqu'un utilisateur clique sur le bouton Ajouter un article au panier, il envoie le addItem()créateur de l'action. Ceci, à son tour, renvoie un actionobjet de type type: ADD_ITEM.

Comme mentionné dans mon tutoriel précédent , lorsqu'une action est dispatchée, tous les réducteurs deviennent actifs.

Actuellement, dans cet exemple, nous n'avons qu'un seul réducteur - cartReducer. Il devient alors actif et écoute les actiondispatchés.

Comme indiqué à l'étape 5, le réducteur prend l'état et l'action en entrée, active action typeet renvoie la nouvelle instance de l'état mis à jour .

Dans cet exemple, lorsque l'action avec type: ADD_ITEMcorrespond au premier cas de commutation, elle crée d'abord une copie de l'état entier à l'aide de l'opérateur de propagation ...state. Ensuite, il effectue la mise à jour nécessaire - qui, dans le cas de l'ajout d'éléments, est numOfItems: state.numOfItems + 1(c'est-à-dire l'augmentation numOfItemsde 1).

De même, en utilisant la même logique, en cliquant sur le bouton Supprimer l'article du panier, une action de type type: DELETE_ITEMest envoyée qui va et diminue numOfItemsde 1.

Voici la démo de l'application de travail :

finalAppDemo-1

Remarquez comment nous avons pu contrôler le comportement du bouton Supprimer l'article du panier en fonction de la valeur de numOfItemsdans le magasin Redux. Comme un nombre négatif d'articles n'a pas de sens, nous avons désactivé le bouton Supprimer l'article du panier si state.numOfItems <= 0.

De cette façon, nous pouvons empêcher l'utilisateur de réduire le nombre d'articles dans le panier s'il est déjà à 0.

Ceci était un exemple de base pour vous montrer comment nous pouvons contrôler le comportement de divers éléments DOM en fonction de l'état interne de l'application.

Et voilà ! Nous venons de terminer la configuration de notre première application React alimentée par Redux. Vous pouvez maintenant continuer et créer divers autres composants en fonction de vos besoins et partager un état global commun entre eux.

Dépôt GitHub

Voici le référentiel GitHub du projet afin que vous puissiez examiner le code source complet si vous le souhaitez : référentiel GitHub

Sommaire

Dans cet article, nous avons appris à lancer rapidement une application React alimentée par Redux.

En cours de route, nous avons appris à :

Créer des actions, des créateurs d'action, des réducteurs et le magasin
Fournir le magasin à l'application en utilisant<Provider>
Lire/accéder au magasin à partir des composants à l'aide du useSelectorcrochet et afficher les informations d'état dans l'interface utilisateur
Distribuez les actions sur les événements utilisateur tels que les clics de bouton, à l'aide du useDispatchcrochet
Contrôlez le comportement des éléments DOM avec une logique basée sur l'état de l'application
Nous avons appris quels sont les inconvénients d'une gestion d'état inefficace et de plusieurs niveaux de forage d'accessoires

Source : https://www.freecodecamp.org/news/how-to-build-a-redux-powered-react-app/

#redux #react

What is GEEK

Buddha Community

Comment Créer Une Application React Alimentée Par Redux

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Jordon Bergstrom

1602991640

Reduce Redux Boilerplate Code with Redux-Actions

Redux has become one of the most popular libraries in front-end development since it was introduced by Dan Abramov and Andrew Clark in 2015. They designed it as the successor for Flux, with the support of some developer tools and a few more concepts embedded in it.

Flux is a fancy name for observer pattern further modified to support React. Both Flux and Redux consist of similar concepts like Store, Actions (events in the application). In other words, Flux is a simple JavaScript object but with some middleware like redux-thunk. It can be a function or a promise for Redux. However, Redux is a single source of truth with concepts like immutability, which improve performance. It is one of the main reasons for Redux to dominate in State Management.

Image for post

Flux vs Redux comparison source: enappd.com

Despite its advantages, some developers have found it rather challenging to deal with Redux due to the amount of boilerplate code introduced with it. And the complexity of the code seems to be another reason for the difficulty.

In this article, we will look at how to reduce the boilerplate code brought about by Actions and Reducers using Redux-Actions

#react-redux-boilerplate #react-redux #react #react-actions #redux

Étienne-Isaac Le Gall

1659636000