avoir plusieurs instances des mêmes composants de réaction redux réutilisables sur la même page / route

Question

Nous sommes en création d'une grande application front-end.

Nous sommes à l'aide de Réagir-Redux pour elle

Nous sommes la création de certains composants réutilisables.

**Cette question est, à l'égard de plusieurs instances de la même réutilisables redux réagir composants sur la même page/route **

Les détails du problème:

Nous avons un Sectionheader composant.Qui est lié à redux de l'état.

Il écoute la propriété d'en-tête réducteur SectionheaderReducer.

Comme nous l'avons 2 instances de cette Sectionheader sur la page de les deux ont tendance à montrer les mêmes valeurs comme ils sont liés à la même banque d'état de la propriété.

Comment faire de la redux en fonction réutilisable réagir composant configurable.De sorte que chaque instance peut avoir des valeurs différentes de propriété en-tête de réducteur de SectionheaderReducer

Answer 1

Vous avez besoin de mettre en œuvre un moyen de namespacing le cas. Ce peut être aussi élémentaire que le passage d'une clé pour différencier les composants et les réducteurs.

Vous pouvez utiliser l' ownProps votre mapStateToProps de la fonction de guide de la cartographie d'un espace de noms

const mapStateToProps = (state, ownProps) {
    let myState = state[ownProps.namespace]
    return {
        myState.value
    }
}

La même méthode peut être utilisée pour transmettre un espace de noms à l' mapDispatchToProps

const mapDispatchToProps = (dispatch, ownProps) {
    return {
        myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
    }
}

N'oubliez pas d'utiliser l'espace de noms dans le type d'action afin de les réducteurs de ne pas marcher sur les orteils

const myAction => (namespace, myParam) {
    return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
}

Et assurez-vous que le réducteur est préfixée trop

const myReducer = (namespace) => (state = initialState, action) => {
    switch(action.type) {
        case `${namespace}/${MY_TYPE_CONSTANT}`:
            return { ...state, action.myParam }
        default:
            return state
    {
}

Maintenant, ajoutez les 2 espaces de réducteurs lors de la combinaison de réducteurs

combineReducers({
    myInstance1 : myReducer('myInstance1')
    myInstance2 : myReducer('myInstance2')
}

Enfin passer de l'espace de noms pour chaque instance

render() {
    return (
        <div>
            <MyComponent namespace='myInstance1' />
            <MyComponent namespace='myInstance2' />
        </div>
    )
}

Avertissement: je suis le principal contributeur à la suite de la bibliothèque.

redux-sous-espace peut fournir un plus avancées namespacing mise en œuvre sans avoir à ré-écrire de cette façon pour chaque composant que vous souhaitez avoir plusieurs instances.

La création de la réducteurs est similaire à ci-dessus

const reducer = combineReducers({ 
    myInstance1: namespaced('myInstance1')(myReducer)
    myInstance2: namespaced('myInstance2')(myReducer)
})

Ensuite, SubspaceProvider peut être utilisé pour changer l'état de chaque composant

render() {
    return (
        <div>
            <SubspaceProvider mapState={state => state.myInstance1} namespace='myInstance1'>
                <MyComponent />
            </SubspaceProvider>
            <SubspaceProvider mapState={state => state.myInstance2} namespace='myInstance2'>
                <MyComponent />
            </SubspaceProvider>
        </div>
    )
}

Assurez-vous de changer d' mapStateToProps fonction donc, commencer la traversée de la sous-arborescence mappé dans le fournisseur

const mapStateToProps = (state) {
    return {
        state.value
    }
}

Il y a aussi un Ordre Supérieur Composant si vous préférez afin de réduire la nidification.

Answer 2

J'ai mis en œuvre de manière différente, sans changer le nom de l'action avec un espace de noms.

Plutôt, j'ai ajouté infra fonctions qui va intercepter l'action de créateurs et d'ajouter meta-data pour chaque action. (suite FSA) De cette façon, vous n'avez pas besoin de changer votre réducteur ou l' mapStateToProps fonction.

Il est également compatible avec redux-thunk.

Doit être facile à utiliser... réducteur-action-intercepteur

Answer 3

J'ai interprété la question de dire:

• vous avez des données de contenu dans le magasin (par exemple, les sections et leurs titres)
• vous avez des composants pour le dessin de bits de données (par exemple, votre <SectionHeader />)
• vous voulez afficher plus d'un article sur une page, mais actuellement tous vos en-têtes ont le même texte

Une solution possible serait de vous ajouter l'idée de "sections" de votre magasin. Vous pouvez ainsi créer des réducteurs qui permettent de gérer le contenu de la structure des données. E. G. le magasin de l'etat, à un moment, peut ressembler à ceci:

{ 
  sections: {
     0: {
        header: 'My section title',
        content: 'Whatever your content is'
     },
     1: {
        header: 'My other section title',
        content: 'Loads of lovely writing or hrefs to images or whatever'
     }
  }
}

``

Vous auriez alors un "composant conteneur" ou "mise en page de la composante" ou "composant intelligent" (ils ont beaucoup de noms), qui "sait" que vous voulez utiliser la section 2 et la section 4 sur une page en particulier. Comment il le sait, est à vous. Peut-être que vous coder en dur les indices (parce que ce sera toujours le même), vous avez peut-être une règle de filtrage, vous avez peut-être un autre champ dans le magasin qui définit le choix... etc.

Le composant conteneur serait alors de passer le choisi de vous diriger vers la "bête" , peut-être comme ceci:

<SectionHeader>{sections[2].header}</SectionHeader>

ou

<SectionHeader title={sections[2].header} />