Stockage des routes de réaction dans Redux

Question

J'utilise react-router v4 pour générer des routes dynamiques qui sont chargées à partir d'une API asynchrone. Les données extraites de l'API est passé à travers une fonction qui permettra de créer REACT routes, quelque chose de similaire à:

import Home from "containers/home" 
import FeaturePage from "containers/featurePage" 

response.map((item) => { 
    if (item.value.toLowerCase() === "home") { 
    return { 
     path: item.path, 
     component: Home, 
     exact: item.isExact 
    } 
    } else if (item.value.toLowerCase() === "featurePage") { 
    return { 
     path: item.path, 
     component: FeaturePage, 
     exact: item.isExact 
    } 
    } else { 
     // ...etc 
    } 
}); 

Une fois que les itinéraires sont chargés, ils sont ajoutés au magasin Redux en utilisant une action-réducteur comme d'habitude. Cela fonctionne bien car le magasin Redux supporte les fonctions. Toutefois, les fonctions de stockage dans le magasin Redux doesn't seem to be the best way forward Quelle serait une meilleure mise en œuvre? J'ai besoin de stocker le composant qui doit être rendu, qui n'est pas sérialisable. Il suffit de stocker le nom du composant sous forme de chaînes?

Answer 1

(Je ne sais pas pourquoi vous voulez les ajouter au magasin bien)

Vous pouvez probablement les utiliser plus tard comme ceci:

import Home from "containers/home" 
import FeaturePage from "containers/featurePage" 

// Assume the routes have been added to the redux store 
const Routes = { 
    Home, 
    FeaturePage 
}; 

response.map(({ component, path, exact }) => { 
    return (
    <Route 
     key={ path } 
     exact={ exact } 
     path={ path } 
     component={ Routes[component] } 
    /> 
); 
}); 

Answer 2

Un React composant est composé de l'état du composant (composé de state et props) et un certain comportement (comme les fonctions et le balisage html) qui est modifié en fonction de l'état. Une fois que vous avez créé le composant, le comportement du composant ne changera pas; Seul l'état du composant va changer.

Je pense que l'enregistrement de l'état du composant serait suffisant pour recréer le composant ultérieurement et que vous n'auriez pas besoin d'enregistrer le composant dans Redux; au lieu de sauvegarder l'état du composant dans Redux. En ce qui concerne l'enregistrement de vos routes dans Redux, la même chose s'applique; vous devriez enregistrer l'état de la route plutôt que la route elle-même dans votre magasin Redux. Vous pouvez avoir une fonction qui pourrait prendre cet objet d'état (contenant le chemin, isExact, le nom du composant, etc.) et le convertir en un vrai composant pour vous.

Espérons que cela aide!