Redux: Pregunta sobre la función combineReducers con múltiples importaciones de módulos reductores

Creado en 23 ago. 2015  ·  9Comentarios  ·  Fuente: reduxjs/redux

Hola.

Imaginemos que tenemos un archivo reductor como este:

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

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

También hay otros 3 archivos reductores similares con múltiples exportaciones.

Si bien el documento simplemente da un ejemplo de cómo usar combineReducers con solo 1 archivo con múltiples exportaciones, combineReducers |

Entonces, ¿cómo usa esa función con múltiples importaciones como esta?

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

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

¡Gracias!

question

Comentario más útil

Importaciones _son_ objeto. Al igual que fusionarías dos objetos:

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

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

Todos 9 comentarios

Importaciones _son_ objeto. Al igual que fusionarías dos objetos:

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

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

Gracias por una respuesta tan rápida; No noté que ES6 ha agregado dicha función. : +1:
Me pregunto si valdría la pena agregar tal cosa al documento redux en caso de que otros lo busquen.

@DesarrolladorXYZ

De hecho, vamos a eliminar import * de la documentación y solo mostraremos ejemplos básicos porque confunde a mucha gente. Consulte https://github.com/rackt/redux/pull/590.

Gracias por una respuesta tan rápida; No noté que ES6 ha agregado dicha función.

Puede usar algo como assign Lodash si no desea incluir un polyfill y ya tiene Lodash o algo similar. Es solo fusionar objetos; nada mágico. :-)

@gaearon Buena idea para eliminar import * . También recomendaría mencionar qué son las declaraciones de desestructuración y los operadores de propagación en un comentario la primera vez que los use.

¿Es posible realizar varias llamadas combineReducers ?
Si uso combineReducers en un archivo separado y luego quiero adjuntar un reductor más (en realidad, es routerReducer de react-router-redux ), ¿es posible hacerlo?
El problema principal de que no puedo usar el operador de propagación ( ...reducers, routing: routerReducer ) solo presenta las características de ES6.

El problema principal de que no puedo usar el operador de propagación (... reductores, enrutamiento: routerReducer) solo presentó las características de ES6.

Simplemente desugars a Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() es parte de ES6 y puede usar un polyfill para ello.

Incluso puede escribir una aproximación razonable a mano:

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

const reducer = combineReducer(finalReducers)

¡Todo es solo JavaScript!

¡Gracias por la rápida respuesta!
Estaba tratando de usar la declaración Object.assign() antes de hacer esta pregunta. En ese caso, antes de combinar, tenía rootReducer objeto con la propiedad default: function combination() que funcionó correctamente. Pero después de usar var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) mi variable reducer contenía solo una propiedad routing: function routerReducer() .
Después de combineReducer(finalReducers) devolvió una función con enrutamiento pero sin los reductores de mi aplicación.

Supongo que estaba haciendo algo mal, pero no puedo entender qué es exactamente.

Pero muchas gracias por su enfoque al usar Object.keys

Si ve default significa que está importando un módulo ES con un CommonJS require . Suele ser un error. Consulte https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrade-babel-tear-and-a-solution-ad2d5ab93ce0 para obtener información sobre esto.

Si puede publicar un proyecto reproduciendo esto, me complace echarle un vistazo.

Lo hago así:

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

Hay una función mapStateToProps allí. La razón es porque a menudo me olvido de agregar una entrada a la función mapStateToProps cuando se coloca en otro archivo. Así que lo llevo a mi reductor principal y para facilitar el acceso. Abra varios archivos para realizar acciones y el reductor es un verdadero dolor.

¿Fue útil esta página
0 / 5 - 0 calificaciones