What is the rule of import with curly braces in React / Redux?

Question

I thought the line:

import { FETCH_WEATHER } from "../actions/index";

means: we don't import the whole object, but import the obj.FETCH_WEATHER from the file ../actions/index.js

One example is, we use

import React, { Component } from "react";

And it is like, we import from "react", let's call it here as obj, and name it React in our own file, and obj.Component, we name it as Component in our own file.

(1) is that true?

(2) in the file ../actions/index.js, the content is actually:

export const FETCH_WEATHER = "FETCH_WEATHER";

so there is no object, and no key / value pair to speak of. So what does import { FETCH_WEATHER } mean?

There is an object. The whole module is the object, and exported things are attached to the object as properties and those are accessed. — Andrew Li, Mar 31 '17 at 13:15
I also thought of it this way at first, so I changed it to `import foo from ...` and used `foo. FETCH_WEATHER` but then it gave an error of `Uncaught TypeError: Cannot read property 'FETCH_WEATHER' of undefined` — nonopolarity, Mar 31 '17 at 13:32
Possible duplicate of [in reactjs, when should I add brackets when import](http://stackoverflow.com/questions/41337709/in-reactjs-when-should-i-add-brackets-when-import) — Shubham Khatri, Mar 31 '17 at 13:36
@太極者無極而生 That's because that's importing the default export, not the module itself. You have no default export so it's undefined — Andrew Li, Mar 31 '17 at 14:00

score 2 · Answer 1 · answered Mar 31 '17 at 13:21

Mozilla Developer Network has a really good documentation on imports in ES6:

import – JavaScript | MDN

Basically the imports within the curly brackets are named imports, and must match a named export from the library you're importing from. That can be any object / function / constant that is exported.

Using import without curly brackets imports the default variable / object / function from the library. The default export has default keyword as part of the export statement: export default someVariable

user394010 · Answer 2 · 2017-04-21T22:06:57.680

0

The module may export one default object and many named items.

It is default module export:

const MyClass = (props) => (
  <div/>
)

export default MyClass

We can import it like this:

import MyClass from "../actions"

The curly braces allows to export named items, so if we have such exports:

const myConst = "The Text"
const myHelper = (num) => 2*num

export default MyClass
export {myHelper, myConst}

We can import its like this:

import MyClass, {myHelper, myConst} from "../actions"

There is not need to add index at path - it is add by default. So write "../actions" enough instead of "../actions/index"

edited Apr 21 '17 at 22:06

answered Mar 31 '17 at 13:19

user394010

374
1
17

can you fix `MyObjectHelper, SomeMore` because I don't see them in the file exporting things... – nonopolarity Mar 31 '17 at 13:35

score 0 · Answer 3 · answered Jul 31 '18 at 05:34

In React, Curly Braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.

Eg.,

import React, { Component } from 'react';

Here the word React represents to import entire object from the file 'react'

{Component} means we specify to import the particular property from the file.

What is the rule of import with curly braces in React / Redux?

3 Answers3