How to import multiple things in javascript

Question

I want to import multiple things in js, I have tried with import * like this:

the export file AppEpics.js:

export fooEpic = Observable.of() // some fancy code;
export barEpic = Observable.of() // some other fancy code;

the import file:

import * as App from './AppEpics'
export default combineEpics(...App)

I found that while I log the App, I get a object that contains the foo and bar, but when I log the ...App, I get nothing.

I am using babel preset env and react for now. How do I solve that?

BTW, the combineEpics only accepts the epics like fooEpics, so that I cannot call this function like this:

import * as App from './AppEpics'
export default combineEpics(App) // that will not work.

App is a single object, not a collection. The spread operator is confused. Should simply be `combineEpics(App);` The combineEpics() function accesses `App.foo` and `App.bar` — Randy Casburn, Feb 21 '18 at 15:35
Because I will import tons of things, and that will make a lot of mistakes. — leuction, Feb 21 '18 at 15:37
@RandyCasburn Actually, I am using redux-observable right now, the combineEpics is a function of redux-observable. so that I cannot modify the combineEpics. — leuction, Feb 21 '18 at 15:42

score 1 · Answer 1 · answered Feb 21 '18 at 15:34

1

Remove "as App" from your import:

import * from './App'

It should work.

answered Feb 21 '18 at 15:34

Krzysztof Raciniewski

4,735
3
21
42

But how can I add all of these foobar into the combineEpics. it seems that I still have to add them one by one manually. – leuction Feb 21 '18 at 15:51

score 1 · Accepted Answer · answered Feb 21 '18 at 15:41

1

The App is object in your case and you try to spread it as arguments for function combineEpics(...App) which would work only if App is array.

If you want to pass all the exported values into combineEpics you need to do smth like combineEpics(...Object.values(App)) or add export default [foo, bar] in App.js and import App from './App' and combineEpics(...App) in file.

answered Feb 21 '18 at 15:41

Sergii Vorobei

1,477
13
19

I can spread the rest properties with this plugin: http://babeljs.io/docs/plugins/transform-object-rest-spread/. Why I cannot spread the whole properties of an object? – leuction Feb 21 '18 at 15:48
You definitely can, but only into another object, e.g. `f = { ...App }` not into function call as in `combineEpics(...App)` which is only for arrays. – Sergii Vorobei Feb 21 '18 at 15:51

score 0 · Answer 3 · answered Feb 21 '18 at 21:45

In case you want to import all at once you also can use

import * from './yourName'

in case you want to import specific components to a file

import { Comp1, Comp2, Comp3 } from './yourName'

It´s needed to export your components. You can do that also at once. For that i added a default reference to a file (index.js) within my package.json.

  "name": "yourName",
  "version": "1.0.0",
  "main": "index.js",

Within the index.js i added the exports.

 export { default as Comp1 } from './yourPath/comp1'

How to import multiple things in javascript

3 Answers3