Redux: Вопрос о функции combReducers с импортом нескольких модулей редуктора

Созданный на 23 авг. 2015 · 9Комментарии · Источник: reduxjs/redux

Здравствуйте.

Представим, что у нас есть такой файл-редуктор:

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

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

Есть также 3 других подобных файла-редуктора с несколькими экспортами.

В документе просто дается пример того, как использовать combReducers только с 1 файлом с несколькими экспортами --commonReducers |

Тогда как вы можете использовать эту функцию с несколькими подобными импортами?

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

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

Благодаря!

question

Источник

genert

Самый полезный комментарий

Импортирует _are_ объект. Точно так же, как вы объединяете два объекта:

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

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

gaearon 23 авг. 2015

👍16

Все 9 Комментарий

Импортирует _are_ объект. Точно так же, как вы объединяете два объекта:

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

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

gaearon 23 авг. 2015

👍16

Спасибо за такой быстрый ответ; не заметил, что в ES6 добавлена такая функция. : +1:
Интересно, стоит ли добавлять такую вещь в документ redux в случае, если другие будут искать это?

genert 23 авг. 2015

@TheDeveloperXYZ

На самом деле мы собираемся удалить import * из документации и просто показать стандартные примеры, потому что это сбивает с толку многих людей. См. Https://github.com/rackt/redux/pull/590.

Спасибо за такой быстрый ответ; не заметил, что в ES6 добавлена такая функция.

Вы можете использовать что-то вроде Lodash assign если вы не хотите включать полифил, и у вас уже есть Lodash или что-то подобное. Это просто слияние объектов; ничего волшебного. :-)

gaearon 23 авг. 2015

@gaearon Хорошая идея удалить import * . Я также рекомендую упомянуть, какие операторы деструктуризации и операторы распространения есть в комментарии, когда вы их впервые используете.

gertig 27 сент. 2015

Возможен ли многократный вызов combineReducers ?
Если я использую combineReducers в отдельном файле, а затем хочу присоединить еще один редуктор (на самом деле это routerReducer из react-router-redux ), возможно ли это сделать?
Основная проблема в том, что я не могу использовать оператор распространения ( ...reducers, routing: routerReducer ) только для поэтапных функций ES6.

PavelGriza 4 мая 2016

Основная проблема в том, что я не могу использовать оператор распространения (... редукторы, маршрутизация: routerReducer) только для поэтапных функций ES6.

Он просто обессахаривает до Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() является частью ES6, и вы можете использовать для него полифил.

Вы даже можете написать разумное приближение вручную:

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

const reducer = combineReducer(finalReducers)

Это всего лишь JavaScript!

gaearon 4 мая 2016

👍1

Спасибо за быстрый ответ!
Я пытался использовать объявление Object.assign() прежде чем задавать этот вопрос. В этом случае перед объединением у меня был объект rootReducer со свойством default: function combination() который работал правильно. Но после использования var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) моя переменная reducer содержала только свойство routing: function routerReducer() .
После combineReducer(finalReducers) вернул функцию с маршрутизацией, но без редукторов моего приложения.

Думаю, я что-то делал не так, но не могу понять, что именно.

Но большое спасибо за ваш подход с использованием Object.keys

PavelGriza 4 мая 2016

Если вы видите default означает, что вы импортируете модуль ES с CommonJS require . Обычно это ошибка. Пожалуйста, посетите https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrade-babel-tears-and-a-solution-ad2d5ab93ce0 для получения некоторой информации по этому поводу.

Если вы можете опубликовать проект, воспроизводящий это, я с удовольствием посмотрю.

gaearon 4 мая 2016

Я так делаю:

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

Там есть функция mapStateToProps. Причина в том, что я часто забываю добавить запись в функцию mapStateToProps, когда она помещается в другой файл. Поэтому я подношу его к своему основному редуктору и для легкого доступа. Откройте несколько файлов, чтобы выполнить действие, и редуктор - настоящая боль.