Redux: Frage zur Funktion kombinierenReduzierer mit mehreren Reduzierermodulimporten

Erstellt am 23. Aug. 2015  ·  9Kommentare  ·  Quelle: reduxjs/redux

Hallo.

Stellen wir uns vor, wir haben eine Reduzierungsdatei wie diese:

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

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

Es gibt auch 3 andere ähnliche Reduzierungsdateien mit mehreren Exporten.

Während das Dokument lediglich ein Beispiel für die Verwendung von combinReducers mit nur einer Datei mit mehreren Exporten enthält - combinReducers |

Wie verwenden Sie diese Funktion dann bei mehreren Importen wie diesem?

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

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

Vielen Dank!

question

Hilfreichster Kommentar

Importiert _are_ Objekt. Genau wie Sie zwei Objekte zusammenführen würden:

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

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

Alle 9 Kommentare

Importiert _are_ Objekt. Genau wie Sie zwei Objekte zusammenführen würden:

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

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

Danke für diese schnelle Antwort; habe nicht bemerkt, dass ES6 eine solche Funktion hinzugefügt hat. : +1:
Ich frage mich, ob es sich lohnt, so etwas zum Redux-Dokument hinzuzufügen, falls andere das suchen würden.

@ TheDeveloperXYZ

Wir werden tatsächlich import * aus der Dokumentation entfernen und nur Vanille-Beispiele zeigen, weil dies viele Leute verwirrt. Siehe https://github.com/rackt/redux/pull/590.

Danke für diese schnelle Antwort; habe nicht bemerkt, dass ES6 eine solche Funktion hinzugefügt hat.

Sie können so etwas wie Lodashs assign wenn Sie keine Polyfüllung einschließen möchten und bereits Lodash oder ähnliches haben. Es geht nur darum, Objekte zusammenzuführen. nichts Magisches. :-)

@gaearon Gute Idee, import * zu entfernen. Ich würde auch empfehlen, zu erwähnen, welche Destrukturierungsanweisungen und Spread-Operatoren in einem Kommentar enthalten sind, wenn Sie sie zum ersten Mal verwenden.

Ist es möglich, combineReducers mehrfach anzurufen?
Wenn ich combineReducers in einer separaten Datei verwende und dann einen weiteren Reduzierer anhängen möchte (tatsächlich ist es routerReducer von react-router-redux ), ist dies möglich?
Das Hauptproblem, dass ich den Spread-Operator ( ...reducers, routing: routerReducer ) nicht verwenden kann, waren nur ES6-Funktionen.

Das Hauptproblem, dass ich den Spread-Operator (... Reduzierer, Routing: routerReducer) nicht verwenden kann, waren nur ES6-Funktionen.

Es geht nur um Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() ist Teil von ES6 und Sie können eine Polyfüllung dafür verwenden.

Sie können sogar eine vernünftige Annäherung von Hand schreiben:

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

const reducer = combineReducer(finalReducers)

Es ist alles nur JavaScript!

Danke für die schnelle Antwort!
Ich habe versucht, die Deklaration Object.assign() , bevor ich diese Frage gestellt habe. In diesem Fall hatte ich vor dem Kombinieren ein rootReducer Objekt mit der Eigenschaft default: function combination() was korrekt funktionierte. Aber nach der Verwendung von var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) meiner Variable reducer enthielt nur eine Eigenschaft routing: function routerReducer() .
Nach combineReducer(finalReducers) eine Funktion mit Routing zurückgegeben, jedoch ohne meine App-Reduzierungen.

Ich glaube, ich habe etwas falsch gemacht, aber ich kann nicht genau verstehen, was.

Aber vielen Dank für Ihren Ansatz bei der Verwendung von Object.keys

Wenn Sie default bedeutet dies, dass Sie ein ES-Modul mit einem CommonJS require importieren. Dies ist normalerweise ein Fehler. Weitere Informationen hierzu finden Sie unter https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrade-babel-Tränen-und-eine-Lösung-ad2d5ab93ce0.

Wenn Sie ein Projekt veröffentlichen können, das dies reproduziert, schaue ich es mir gerne an.

So mach ich es:

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
})

Dort befindet sich die Funktion mapStateToProps. Der Grund dafür ist, dass ich oft vergessen habe, der Funktion mapStateToProps einen Eintrag hinzuzufügen, wenn dieser in eine andere Datei eingefügt wird. Also bringe ich es zu meinem Hauptreduzierer und für einen einfachen Zugang. Öffnen Sie mehrere Dateien, um Maßnahmen zu ergreifen, und der Reduzierer ist ein echtes Problem.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen