React+Reduxのファイルはどういう順序で見ていけば良いのでしょうか？

Question

Ruby on RailsにReact+Reduxを導入しようと勉強しています。
reduxの公式を読んで勉強している最中です。

http://redux.js.org/docs/basics/ExampleTodoList.html
こちらの例のindex.jsの記述ですが

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

idがrootの箇所に
= javascript_pack_tag 'index'
と置いてindex.jsを読み込むと思います。
しかしこのindex.jsを見るに当ってどういう順番で見るべき（読み込まれる）なのでしょうか？

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'

ここの4行はReact+Reduxを使うための記述？ということで特に気にしていませんが

import todoApp from './reducers'
import App from './components/App'

ここからはimportということで先に./reducers/やら./componentsの中が読み込まれるのでしょうか？（importの行が読み込まれた時点で読みに行く？）
それとも呼ばれた時に初めて読み込まれるのでしょうか？

また、importので中括弧ついてる場合とついてない場合がありますが、何が違うのでしょうか？
React+Reduxの概念に初めて触れましたが、どういう感じでまず読んでいけばいいのかすら分からず困惑しています。

よろしくお願いします。

Answer 1

かっこのあるなしは、読み込み先で読み込み対象がどのようにexportされてるかによって決まります。

export default xxx

とdefault指定されてるものは、カッコ無しでimportになります。そうでないものはカッコ必要です。

Comments

[dongw]

回答ありがとうございます。
export defaultが指定されているものはカッコなしでimport出来る、ということなのですね。
ということは 基本的に export defaultを指定するのが普通なのでしょうか？
そうしていればimport先で毎回カッコを記述しなくて済むということですよね。

[退会済みユーザー]

default指定できるのは一ファイルに１つなので、同じファイルでいろいろexportしてる場合はアレです

[dongw]

なるほど、1ファイルでexportが1つの場合は問題ないものの、複数のexportがある場合は考えなければいけないのですね、ありがとうございます！

Answer 2

import todoApp from './reducers'

これは./reducers/index.js↓でexportしている部分をtodoAppに代入しているようなことでは？

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp   // ←export defaultの部分の変数をimportしたファイルでも使える

importで./redusersと指定すると./redusers/index.jsを読み込んでくれるようです。
以下はどれも同じ意味で読み込んでくれる。

import todoApp from './redusers/index.js'

import todoApp from './redusers/index' .jsを省略できる

import todoApp from './reducers' ファイル名がindex.jsだったらディレクトリ名だけで読み込める

中括弧は、importしたいファイルから、使用したい部分だけを読むこむことができるみたいです。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

Reactだったら以下の2つは同じ意味で使用できたりするようです。

//中括弧使用しない
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
   <h1>React</h1>,
   document.getElementById('root')
)

//中括弧使用する
import React from 'react'
import { render } from 'react-dom'


render(
   <h1>React</h1>,
   document.getElementById('root')
)

Comments

[dongw]

回答ありがとうございます。
中括弧の違いは使用した部分だけを読むことが出来るようにするのですね。
確かに例の場合だと { render } だけimportしていれば記述がシンプルになりますね。

export default todoAppでexportした変数todoAppというのは

```
const todoApp = combineReducers({
todos,
visibilityFilter
})
```
こちらで定義したtodoAppという変数がimportした先で使えるということでしょうか？

また、./redusers/index.jsは/index.jsの5行目が読まれた時点で一度全部読み込まれるということで合っていますか？

[saitouakihiro]

中括弧は、名前付きexportをimportするときに使うという方が正しい気がします。
http://qiita.com/bmf_san/items/bdb67c7abf4d381cf976

全部という言い方よりかはindex.jsの5行目が読まれた時点でredusers/index.jsのconst todoAppという変数の値が読み込まれているという感じだと思います。

[dongw]

なるほど、qiitaの記事とても参考になりました！

ファイルをすべて読む、というよりそのインポート元のファイルの変数を読み込むということなのですね。腑に落ちました。
ありがとうございます！

[saitouakihiro]

中括弧の説明で最初誤解を招く書き方ですみませんでした