Redux: Pertanyaan tentang fungsi gabunganReduser dengan beberapa impor modul peredam

Dibuat pada 23 Agu 2015 · 9Komentar · Sumber: reduxjs/redux

Halo.

Mari kita bayangkan bahwa kita memiliki file peredam seperti ini:

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

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

Ada juga 3 file peredam serupa lainnya dengan beberapa ekspor.

Sementara dokumen hanya memberikan contoh bagaimana menggunakan CombineReducers dengan hanya 1 file dengan beberapa ekspor - CombineReducers |

Lalu bagaimana Anda menggunakan fungsi itu dengan beberapa impor seperti ini?

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

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

Terima kasih!

question

Sumber

genert

Komentar yang paling membantu

Mengimpor objek _are_. Sama seperti Anda menggabungkan dua objek:

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

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

gaearon pada 23 Agu 2015

👍16

Semua 9 komentar

Mengimpor objek _are_. Sama seperti Anda menggabungkan dua objek:

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

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

gaearon pada 23 Agu 2015

👍16

Terima kasih atas balasan yang cepat; tidak memperhatikan bahwa ES6 telah menambahkan fungsi seperti itu. : +1:
Saya ingin tahu apakah menambahkan hal seperti itu ke dokumen redux akan bermanfaat jika orang lain akan mencari itu?

genert pada 23 Agu 2015

@Tokopedia

Kami sebenarnya akan menghapus import * dari dokumentasi dan hanya menampilkan contoh vanilla karena membingungkan banyak orang. Lihat https://github.com/rackt/redux/pull/590.

Terima kasih atas balasan yang cepat; tidak memperhatikan bahwa ES6 telah menambahkan fungsi seperti itu.

Anda dapat menggunakan sesuatu seperti Lodash's assign jika Anda tidak ingin menyertakan polyfill, dan sudah memiliki Lodash atau yang serupa. Ini hanya menggabungkan objek; tidak ada yang ajaib. :-)

gaearon pada 23 Agu 2015

@gaearon Ide bagus untuk menghapus import * . Saya juga merekomendasikan untuk menyebutkan pernyataan destructuring dan operator penyebaran dalam komentar saat pertama kali Anda menggunakannya.

gertig pada 27 Sep 2015

Apakah mungkin untuk melakukan beberapa panggilan combineReducers ?
Jika saya menggunakan combineReducers dalam file terpisah dan kemudian saya ingin melampirkan satu peredam lagi (sebenarnya, routerReducer dari react-router-redux ) apakah mungkin dilakukan?
Masalah utama bahwa saya tidak dapat menggunakan operator penyebaran ( ...reducers, routing: routerReducer ) hanya fitur ES6 yang dipentaskan.

PavelGriza pada 4 Mei 2016

Masalah utama bahwa saya tidak dapat menggunakan operator penyebaran (... reduksi, perutean: routerReducer) hanya mementaskan fitur ES6.

Itu hanya desugars ke Object.assign({}, reducers, { routing: routerReducer }) . Object.assign() adalah bagian dari ES6 dan Anda dapat menggunakan polyfill untuk itu.

Anda bahkan dapat menulis perkiraan yang masuk akal dengan tangan:

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

const reducer = combineReducer(finalReducers)

Itu semua hanya JavaScript!

gaearon pada 4 Mei 2016

👍1

Terima kasih atas tanggapan yang cepat!
Saya mencoba menggunakan deklarasi Object.assign() sebelum menanyakan pertanyaan ini. Dalam hal ini sebelum menggabungkan saya memiliki rootReducer objek dengan properti default: function combination() yang bekerja dengan benar. Tetapi setelah menggunakan var reducer = Object.assign({}, rootReducer, { routing: routerReducer }) variabel saya reducer hanya berisi properti routing: function routerReducer() .
Setelah combineReducer(finalReducers) mengembalikan fungsi dengan perutean tetapi tanpa reduksi aplikasi saya.

Saya kira saya melakukan sesuatu dengan cara yang salah, tetapi saya tidak dapat memahami apa sebenarnya.

Tapi terima kasih banyak tentang pendekatan Anda dengan menggunakan Object.keys

PavelGriza pada 4 Mei 2016

Jika Anda melihat default berarti Anda mengimpor modul ES dengan CommonJS require . Ini biasanya kesalahan. Silakan periksa https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrading-babel-tear-and-a-solution-ad2d5ab93ce0 untuk beberapa info tentang ini.

Jika Anda dapat mempublikasikan proyek yang mereproduksi ini, saya akan dengan senang hati melihatnya.

gaearon pada 4 Mei 2016

Saya melakukannya seperti ini:

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

Ada fungsi mapStateToProps di sana. Alasannya karena saya sering lupa menambahkan entri ke fungsi mapStateToProps ketika dimasukkan ke file lain. Jadi saya membawanya ke peredam utama saya, dan untuk akses mudah. Buka banyak file untuk membuat tindakan dan peredam sangat menyakitkan.