Redux: سؤال حول وظيفة الجمع بين أجهزة التخفيض مع واردات وحدة المخفض المتعددة

تم إنشاؤها على ٢٣ أغسطس ٢٠١٥ · 9تعليقات · مصدر: reduxjs/redux

مرحبا.

لنتخيل أن لدينا ملف مخفض مثل هذا:

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

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

هناك أيضًا 3 ملفات مخفض أخرى مماثلة مع عمليات تصدير متعددة.

بينما يعطي المستند مثالاً فقط عن كيفية استخدام combeducers مع ملف واحد فقط مع عمليات تصدير متعددة - combinReducers |

ثم كيف يمكنك استخدام هذه الوظيفة مع عمليات استيراد متعددة مثل هذا؟

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 في ٢٣ أغسطس ٢٠١٥

👍16

ال 9 كومينتر

الواردات _are_ كائن. تمامًا كما لو كنت تدمج كائنين:

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

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

gaearon في ٢٣ أغسطس ٢٠١٥

👍16

شكرا لمثل هذا الرد السريع. لم يلاحظ أن ES6 أضاف هذه الوظيفة. : +1:
أتساءل عما إذا كانت إضافة مثل هذا الشيء إلى مستند إعادة الكتابة ستكون مجدية في حالة ما إذا كان الآخرون سيسعون إلى ذلك؟

genert في ٢٣ أغسطس ٢٠١٥

تضمين التغريدة

سنقوم بالفعل بإزالة import * من الوثائق وسنعرض فقط أمثلة من الفانيليا لأنها تربك الكثير من الناس. انظر https://github.com/rackt/redux/pull/590.

شكرا لمثل هذا الرد السريع. لم يلاحظ أن ES6 أضاف هذه الوظيفة.

يمكنك استخدام شيء مثل Lodash's assign إذا كنت لا تريد تضمين polyfill ، ولديك بالفعل Lodash أو شيء مشابه. إنها مجرد دمج الأشياء ؛ لا شيء سحر. :-)

gaearon في ٢٣ أغسطس ٢٠١٥

gaearon فكرة جيدة لإزالة import * . أوصي أيضًا بذكر عبارات التدمير وعوامل الانتشار الموجودة في تعليق في المرة الأولى التي تستخدمها فيها.

gertig في ٢٧ سبتمبر ٢٠١٥

هل يمكن إجراء مكالمات متعددة على combineReducers ؟
إذا استخدمت combineReducers في ملف منفصل ثم أردت إرفاق مخفض آخر (في الواقع ، هو routerReducer من react-router-redux ) هل من الممكن أن أفعل؟
المشكلة الرئيسية التي لا يمكنني استخدام عامل الانتشار ( ...reducers, routing: routerReducer ) هي فقط ميزات ES6 المرحلية.

PavelGriza في ٤ مايو ٢٠١٦

المشكلة الرئيسية التي لا يمكنني استخدام عامل الانتشار (... المخفضات ، التوجيه: routerReducer) هي فقط ميزات ES6 المرحلية.

انها مجرد desugars إلى Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() هو جزء من ES6 ويمكنك استخدام polyfill له.

يمكنك حتى كتابة تقدير تقريبي معقول يدويًا:

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

const reducer = combineReducer(finalReducers)

كل ذلك مجرد JavaScript!

gaearon في ٤ مايو ٢٠١٦

👍1

شكرا للاستجابة السريعة!
كنت أحاول استخدام تصريح Object.assign() قبل طرح هذا السؤال. في هذه الحالة قبل الدمج كان لدي عنصر rootReducer مع الخاصية default: function combination() والتي تعمل بشكل صحيح. ولكن بعد استخدام var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) reducer احتوى المتغير routing: function routerReducer() .
بعد combineReducer(finalReducers) أعادت وظيفة مع التوجيه ولكن بدون مخفضات تطبيقي.

أعتقد أنني كنت أفعل شيئًا بطريقة خاطئة ، لكن لا يمكنني فهم ما هو بالضبط.

لكن شكرًا جزيلاً لك على أسلوبك في استخدام Object.keys

PavelGriza في ٤ مايو ٢٠١٦

إذا رأيت default يعني أنك تستورد وحدة ES باستخدام CommonJS require . هذا عادة خطأ. يرجى مراجعة https://medium.com/@kentcdodds/misunderstanding -es6-modules-Upgrading-babel-tears-and-a-solution-ad2d5ab93ce0 للحصول على بعض المعلومات حول هذا الموضوع.

إذا كان بإمكانك نشر مشروع يعيد إنتاج هذا ، يسعدني إلقاء نظرة عليه.

gaearon في ٤ مايو ٢٠١٦

أفعل ذلك مثل هذا:

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 عند وضعها في ملف آخر. لذا أحضره إلى مخفضي الرئيسي ، وللسهولة الوصول إليه. فتح ملفات متعددة لاتخاذ إجراء والمخفض هو ألم حقيقي.