https://okamuuu.hatenablog.com/entry/2016/10/12/124413

前々回で redux となる actions, reducers　を記述しました。前回で react である components を記述しました。今回はこれらをつなげる containers を記述していきます。

containers

src/containers/MemoList.js:

import { connect } from 'react-redux'
import MemoList from '../components/MemoList'

const mapStateToProps = (state) => {
  return {
    memos: state.memos
  }
}

export default connect(mapStateToProps, undefined)(MemoList)

create src/containers/AddMemo.js:

import React from 'react'
import { connect } from 'react-redux'
import { addMemo } from '../actions'
import AddMemo from '../components/AddMemo'

function mapDispatchToProps(dispatch) {
  return {
    handleMemoSubmit: (text) => {
      dispatch(addMemo(text))
    },  
  }
}

export default connect(undefined, mapDispatchToProps)(AddMemo)

エンディング

create src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import memoApp from './reducers'
import AddMemo from './containers/AddMemo'
import MemoList from './containers/MemoList'

let store = createStore(memoApp)

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

create www/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

実行

% webpack-dev-server

感想

というわけで redux やってみました。概念自体はそこまで複雑ではないので試すだけ試して損はないかなあ。意図的に components には redux の記述を含めないで containers に退避させましたが Example 見る感じだとまとめて書いているのでそうしたほうが記述少なくて良いかも。

ソースコード

https://github.com/okamuuu/practice-react-redux