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!
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.
Commentaire le plus utile
Importe l'objet _are_. Tout comme vous fusionniez deux objets: