前々回で 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 見る感じだとまとめて書いているのでそうしたほうが記述少なくて良いかも。