reduxを使うためにいろいろお勉強３


下記の記事みたいなのをぐちゃぐちゃやる。

Reduxを動かしながら理解する | takayukii.blog
http://goo.gl/Ji3jHw

でも、このきじと自分が触ってるスターターキットのファイル構成が違うのはバージョン違いかなあ。

## 構造について

これまで知ってるのは下記だった。

```
.
├── actions
│   └── index.js
├── app.es6
├── app.js
├── app.jsx
├── components
│   ├── App.jsx
│   └── TodoList.jsx
├── containers
│   ├── AddTodo.jsx
│   └── VisibleTodoList.js
├── index.html
└── reducers
    ├── index.js
    ├── todos.js
    └── visibilityFilter.js
```

今回のは違ってよくわからない。routerのせいか。

```
.
├── components # プレゼーションコンポーネント(jsx only)
│   ├── Counter
│   │   ├── Counter.js
│   │   ├── Counter.scss
│   │   └── index.js
│   └── Header
│       ├── Header.js
│       ├── Header.scss
│       └── index.js
├── containers # どのようなプロパティかを注入するコンテナ
│   └── AppContainer.js
├── index.html
├── layouts
│   └── CoreLayout # レイアウト関連。。？？
│       ├── CoreLayout.js
│       ├── CoreLayout.scss
│       └── index.js
├── main.js
├── routes # ルーター
│   ├── Counter # カウンターコンポーネントのルーター
│   │   ├── containers # えー、こっちにコンテナ？
│   │   │   └── CounterContainer.js
│   │   ├── index-compiled.js
│   │   ├── index-compiled.js.map
│   │   ├── index.js
│   │   └── modules # アクションとかレデューサーがある。。
│   │       └── counter.js
│   ├── Home # HOMEのルーター
│   │   ├── assets
│   │   │   └── Duck.jpg
│   │   ├── components # ここでjsx。。
│   │   │   ├── HomeView.js
│   │   │   └── HomeView.scss
│   │   └── index.js
│   └── index.js # ルートのルーター
├── static
│   ├── favicon.ico
│   ├── humans.txt
│   └── robots.txt
├── store # ストア。。？
│   ├── createStore.js
│   └── reducers.js # レデューサーは複数の関数を組み合わせ
└── styles
    ├── _base.scss
    └── core.scss
```

jsxの置き場がさらに分割された感じ？
子コンポーネントでも、初期状態のだけは外にでてて、
あとからのビューは子コンポーネントはルーターのディレクトリの内部にディレクトリが切られている？？
layout,store関連はよくわかってない。
アクションとかレデューサーの入っているディレクトリが、
moduleだったりstoreだったり？？

公式参照。

https://github.com/davezuko/react-redux-starter-kit#application-structure

```
.
├── bin                      # Build/Start scripts
├── blueprints               # Blueprint files for redux-cli
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── server                   # Koa application (uses webpack middleware)
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Reusable Presentational Components
│   ├── containers           # Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── styles               # Application-wide styles (generally settings)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── routes               # Main route definitions and async split points
│       ├── index.js         # Bootstrap main application routes with store
│       └── Home             # Fractal route
│           ├── index.js     # Route definitions and async split points
│           ├── assets       # Assets required to render components
│           ├── components   # Presentational React Components
│           ├── container    # Connect components to actions and store
│           ├── modules      # Collections of reducers/constants/actions
│           └── routes **    # Fractal sub-routes (** optional)
└── tests                    # Unit tests
```

コンポーネントとコンテナの再利用可能なものはルート。

## routerのあたりがよくわからん
storeを渡す時はリストにしてる。

```
export const createRoutes = (store) => ({
        path: '/',
        component: CoreLayout,
        indexRoute: Home,
        childRoutes: [
            CounterRoute(store)
        ]
    }
)
```

```
var createRoutes = exports.createRoutes = function createRoutes(store) {
  return {
    path: '/',
    component: _CoreLayout2.default,
    indexRoute: _Home2.default,
    childRoutes: [(0, _Counter2.default)(store)]
  };
};
```

`(0, _Counter2.default)`の意味がわからないけど。。
`_Counter2.default`とほぼ同じだろう。きっと。

リストに入れているだけということでいいかな。
あれ、だめかも。
単独のファイルだけトランスパイルしても違ったことになりそう。。
そうでもないか？

### どうなってるのか

ホームは子ルーターの関数をそのまま渡す
それはオブジェクトで、

```
{
	component: jsx
}
```

カウンターは子ルーターを実行してリストに入れて渡す
これはオブジェクトで、

```
{
	path: 'counter',
	component: getComponent{
		ルーティング処理、
		ここでstoreにレデューサーを関連付ける
	}
}
```

## reducerのところの記述がわからん

```
injectReducer(store, {key: 'counter', reducer})
```

```
(0, _reducers.injectReducer)(store, { key: 'counter', reducer: reducer });
```

なるへそ。

# reducer

ActionからどのようにStoreの値へ落としこむかのロジックだと思います（値を書き換えない）



# 参考urls

## 事例

react-reduxでページ読み込み時、actionを呼び出す方法 - Qiita
http://goo.gl/EfXR33

redux/Examples.md at master · reactjs/redux
https://goo.gl/Monlqw

# reduxとは

React+Redux入門 - Qiita
http://goo.gl/dQejH3

ReduxとES6でReact.jsのチュートリアルの写経 - undefined
http://goo.gl/C6C22V