今回は React 入門をいったんお休みして、 Redux に入門する。最終的には React & Redux のアプリを作る必要が出てきそうだたので、ここらへんでいったんしっかり勉強したほうがいいかなと。

Redux のページを一通り読んで見たがいまいちわからず、Redux の公式 Example を眺めながら実際に動かしてみた。

最終的にはここの記事に書かれていることが行われているんだな。ということで納得いったんだけど、納得するまでに、Exampleのどのファイルがどの役割と結びついているのかがイメージできなくて困ってた。

タスクの追加に関して言うと、User Input と View に当たる部分は AddTodo.jsだろう。ボタンを押すと form ノードの onSubmit が発火する。すると、dispatch(addTodo(input.value)) がコールされる。addTodo()でアクションが作成され、dispatch() で storeにディスパッチされる。 addTodo() というのが ActionCreator のことで、実装はsrc/actions/index.js にある。内容は単純にオブジェクトを生成してるだけ。生成されたオブジェクトは Action にあたり、それが dispatch() 関数によって、store にディスパッチされる。

ディスパッチ先のstoreは src/index.js で作成されている。crateStore() 関数に reducer を渡して store を作成している。作成された store は <Provider> コンボーネントに渡されることで保持されている。

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

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

// ここで store が作成される。
const store = createStore(rootReducer)

render(
  // ここで store を保持
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

reducer は src/reducers フォルダの下にある。reducer は新たなstate を作成し返すだけの関数で、sub-reducer を combineReducers() 関数を使うことでまとめて一つの reducer とすることができるようだ。

また、AddTodo.js や VisibleTodoList.js は connect() という関数でラップされているが、これは dispatch() 関数や state をコンポーネントに渡すために必要なものらしい。

成果物

ここに、Todo に追加する部分だけを抽出したものを置いておく。できるだけ単純にしたので最低限のReduxのふるまいを知る分には有用だろう。

GitHub - bamchoh/redux-study at 3b75c828a886b19cdce2122bf1eacdc9f9010edf

bamchoh’s diary

Redux 入門 (1)

成果物