web-dev-qa-db-fra.com

Où placer les fonctions utilitaires dans une application React-Redux?

Dans une application React-Redux, j'ai un état comme celui-ci:

state = {
    items: [
        { id: 1, first_name: "John", last_name: "Smith", country: "us" },
        { id: 2, first_name: "Jinping", last_name: "Xi", country: "cn" },
    ]
}

que je rend en utilisant un composant React.

Maintenant, j'ai besoin d'une fonction qui me donne le "nom complet" d'une personne. Donc ce n'est pas seulement "prénom + nom" mais cela dépend du pays (par exemple, ce serait "nom + prénom" en Chine), donc il y a une logique relativement complexe, que je voudrais encapsuler dans une fonction utilisable à partir de n'importe quel React composant.

Dans OOP je créerais une méthode Person::getFullName() qui me donnerait cette information. Cependant l'objet state est un objet "stupide" où les sous-objets ne se pas de méthodes spécialisées.

Alors, quelle est la méthode recommandée pour gérer cela dans React-Redux en général? Tout ce à quoi je peux penser, c'est créer une fonction globale telle que user_getFullName(user) qui prendrait un utilisateur et retournerait le nom complet, mais ce n'est pas très élégant. Toute suggestion?

javascriptoopreactjsreduxutility-method
27
laurent

Je suis l'approche de la création de bibliothèques pour des cas comme celui-ci dans mes applications, et jusqu'à présent, cela fonctionne assez bien pour moi.

Dans ce cas, je voudrais créer un nouveau module, par ex. {ComponentRoot}/lib/user.js Qui exporte une fonction getFullName(user) ou éventuellement getFullName(firstName, lastName, country), selon les circonstances.

Maintenant, c'est juste une question de importation du module où vous avez besoin de la fonctionnalité, aucune fonction globale requise:

import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>

Nous plaçons notre dossier de bibliothèque au même niveau que le dossier des composants, etc., mais ce qui vous convient le mieux devrait le faire.

27
Timo

Tout d'abord, Redux n'a aucune opinion sur la structure des fichiers de votre application .

Certains projets célèbres de passe-partout mettent le code dans un utils/ dossier:

Exemple de structure de dossier:

  • src /
    • composants/
      • ...
    • réducteurs /
      • ...
    • utils /
      • ...
13
Tyler Long