Redux: Question sur la fonction combineReducers avec plusieurs importations de modules de réduction

Créé le 23 août 2015  ·  9Commentaires  ·  Source: reduxjs/redux

Bonjour.

Imaginons que nous ayons un fichier de réduction comme celui-ci:

export function something1 (state={}, action) {
  switch (action.type) {
    ...
  }
}

export function something2 (state={}, action) {
  switch (action.type) {
    ...
  }
}

Il existe également 3 autres fichiers réducteurs similaires avec plusieurs exportations.

Alors que le document donne simplement un exemple d'utilisation de combineReducers avec un seul fichier avec plusieurs exportations - combineReducers |

Alors, comment utilisez-vous cette fonction avec plusieurs importations comme celle-ci?

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';
...

const reducer = combineReducers(???); // What argument to write. How to turn imports to object?

Merci!

question

Commentaire le plus utile

Importe l'objet _are_. Tout comme vous fusionniez deux objets:

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';

const allReducers = Object.assign({}, reducers1, reducers2);
const reducer = combineReducers(allReducers);

Tous les 9 commentaires

Importe l'objet _are_. Tout comme vous fusionniez deux objets:

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';

const allReducers = Object.assign({}, reducers1, reducers2);
const reducer = combineReducers(allReducers);

Merci pour cette réponse rapide; n'a pas remarqué que ES6 a ajouté une telle fonction. : +1:
Je me demande si l'ajout d'une telle chose au document redux en vaudrait la peine au cas où d'autres le chercheraient?

@TheDeveloperXYZ

Nous allons en fait supprimer import * de la documentation et simplement montrer des exemples vanille car cela déroute beaucoup de gens. Voir https://github.com/rackt/redux/pull/590.

Merci pour cette réponse rapide; n'a pas remarqué que ES6 a ajouté une telle fonction.

Vous pouvez utiliser quelque chose comme assign Lodash si vous ne voulez pas inclure de polyfill et que vous avez déjà Lodash ou quelque chose de similaire. Il s'agit simplement de fusionner des objets; rien de magique. :-)

@gaearon Bonne idée pour supprimer import * . Je recommanderais également de mentionner les instructions de déstructuration et les opérateurs de diffusion dans un commentaire la première fois que vous les utilisez.

Est-il possible d'appeler plusieurs fois combineReducers ?
Si j'utilise combineReducers dans un fichier séparé et que je veux attacher un autre réducteur (en fait, c'est routerReducer partir de react-router-redux ) est-il possible de le faire?
Le principal problème que je ne peux pas utiliser l'opérateur de propagation ( ...reducers, routing: routerReducer ) ne concerne que les fonctionnalités ES6.

Le problème principal est que je ne peux pas utiliser l'opérateur de propagation (... réducteurs, routage: routerReducer) uniquement les fonctionnalités ES6.

Il désuète juste à Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() fait partie de ES6 et vous pouvez utiliser un polyfill pour cela.

Vous pouvez même écrire une approximation raisonnable à la main:

let finalReducers = {}
Object.keys(reducers).forEach(key => finalReducers[key] = reducers[key])
finalReducers.routing = routerReducer

const reducer = combineReducer(finalReducers)

Ce n'est que du JavaScript!

Merci pour une réponse rapide!
J'essayais d'utiliser la déclaration Object.assign() avant de poser cette question. Dans ce cas, avant de combiner j'avais un objet rootReducer avec la propriété default: function combination() qui fonctionnait correctement. Mais après avoir utilisé var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) ma variable reducer contenait juste une propriété routing: function routerReducer() .
Après combineReducer(finalReducers) renvoyé une fonction avec routage mais sans mes réducteurs d'application.

Je suppose que je faisais quelque chose d'une mauvaise manière, mais je ne comprends pas quoi exactement.

Mais merci beaucoup pour votre approche en utilisant Object.keys

Si vous voyez default signifie que vous importez un module ES avec un CommonJS require . C'est généralement une erreur. Veuillez consulter https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrade-babel-tears-and-a-solution-ad2d5ab93ce0 pour plus d'informations à ce sujet.

Si vous pouvez publier un projet reproduisant ceci, je serai ravi d'y jeter un œil.

Je le fais comme ça:

mainReducer.js

import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'

// list of reducers
import registerReducer from 'registerReducer'
import homeReducer from 'homeReducer'
import aboutReducer from 'aboutReducer'
import contactUsReducer from 'contactUsReducer'


export const mapStateToProps = (state) => {
    return {
        register: state.register,
        home: state.home,
        about: state.about,
        contact:state.contact
    }
}
export default combineReducers({
    routing: routerReducer,
    register: registerReducer,
    home: homeReducer,
    about: aboutReducer,
    contact: contactUsReducer
})

Il y a la fonction mapStateToProps là-dedans. La raison en est que j'ai souvent oublié d'ajouter une entrée à la fonction mapStateToProps lorsqu'elle est placée dans un autre fichier. Je l'apporte donc à mon réducteur principal, et pour un accès facile. Ouvrez plusieurs fichiers pour faire de l'action et le réducteur est une vraie douleur.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

dmitry-zaets picture dmitry-zaets  ·  3Commentaires

ilearnio picture ilearnio  ·  3Commentaires

mickeyreiss-visor picture mickeyreiss-visor  ·  3Commentaires

rui-ktei picture rui-ktei  ·  3Commentaires

timdorr picture timdorr  ·  3Commentaires