Redux: Pergunta sobre a função combineReducers com várias importações de módulo redutor

Criado em 23 ago. 2015 · 9Comentários · Fonte: reduxjs/redux

Olá.

Vamos imaginar que temos um arquivo redutor como este:

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

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

Existem também 3 outros arquivos redutores semelhantes com várias exportações.

Embora o documento apenas dê um exemplo de como usar combineReducers com apenas 1 arquivo com várias exportações - combineReducers |

Então, como você usa essa função com várias importações como essa?

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

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

Obrigado!

question

Fonte

genert

Comentários muito úteis

Importa objeto _are_. Assim como você mesclaria dois objetos:

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

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

gaearon em 23 ago. 2015

👍16

Todos 9 comentários

Importa objeto _are_. Assim como você mesclaria dois objetos:

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

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

gaearon em 23 ago. 2015

👍16

Obrigado por essa resposta rápida; não notei que o ES6 adicionou tal função. : +1:
Eu me pergunto se adicionar tal coisa ao redux do documento valeria a pena no caso de outro buscar isso?

genert em 23 ago. 2015

@TheDeveloperXYZ

Na verdade, vamos remover import * da documentação e apenas mostrar exemplos simples porque isso confunde muitas pessoas. Consulte https://github.com/rackt/redux/pull/590.

Obrigado por essa resposta rápida; não notei que o ES6 adicionou tal função.

Você pode usar algo como assign Lodash se não quiser incluir um polyfill e já tiver Lodash ou algo semelhante. É apenas mesclar objetos; nada mágico. :-)

gaearon em 23 ago. 2015

@gaearon Boa ideia para remover import * . Eu também recomendaria mencionar quais instruções de desestruturação e operadores de propagação estão em um comentário na primeira vez que você os usar.

gertig em 27 set. 2015

É possível fazer várias chamadas combineReducers ?
Se eu usar combineReducers em um arquivo separado e depois quiser anexar mais um redutor (na verdade, é routerReducer de react-router-redux ), é possível fazer?
O principal problema é que não posso usar o operador spread ( ...reducers, routing: routerReducer ) apenas recursos ES6 encenados.

PavelGriza em 4 mai. 2016

O principal problema é que eu não posso usar o operador de propagação (... redutores, roteamento: routerReducer) apenas recursos ES6 preparados.

Simplesmente desugars para Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() faz parte do ES6 e você pode usar um polyfill para ele.

Você pode até escrever uma aproximação razoável à mão:

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

const reducer = combineReducer(finalReducers)

É tudo JavaScript!

gaearon em 4 mai. 2016

👍1

Obrigado pela resposta rápida!
Eu estava tentando usar a declaração Object.assign() antes de fazer esta pergunta. Nesse caso, antes de combinar eu tinha rootReducer objeto com a propriedade default: function combination() que funcionou corretamente. Mas depois de usar var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) minha variável reducer continha apenas uma propriedade routing: function routerReducer() .
Depois de combineReducer(finalReducers) retornou uma função com roteamento, mas sem meus redutores de aplicativo.

Acho que estava fazendo algo errado, mas não consigo entender o que exatamente.

Mas muito obrigado sobre sua abordagem com o uso de Object.keys

PavelGriza em 4 mai. 2016

Se você vir default significa que você está importando um módulo ES com um CommonJS require . Isso geralmente é um erro. Verifique https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgradeing-babel-tear-and-a-solution-ad2d5ab93ce0 para obter algumas informações sobre isso.

Se você puder publicar um projeto reproduzindo isso, fico feliz em dar uma olhada.

gaearon em 4 mai. 2016

Eu faço assim:

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

Existe a função mapStateToProps lá. A razão é porque frequentemente me esqueci de adicionar uma entrada à função mapStateToProps quando ela é colocada em outro arquivo. Então eu trago para meu redutor principal, e para fácil acesso. Abrir vários arquivos para agir e redutor é uma verdadeira dor.