「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
create-react-appを使用した、React + Reduxの step by step。
色々悩んだが(と言うか、コレのRedux化に失敗したため)、
先ずは、以下の「Example: Todo List」のClass化版をやることに。
ココでは、Web備忘録の方をやってみた。
─ src/ ├─ App.js ├─ index.js ├┬ actions/ │└─ Todo.js ├┬ components/ │└─ Todo.js ├┬ containers/ │└─ Todo.js ├┬ reducers/ │└─ Todo.js └── createStore.js
>create-react-app react-redux-todo
>npm install --save redux react-redux redux-logger
以下を見ても明らかだが、
Entry Point, Component, Action, Reducer
と、複数のモジュールを行き来してシンドい。
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/react-redux-todo
「Example: Todo List」が動作したので、先程失敗したコチラのRedux化に再チャレンジ。
>npm install --save redux react-redux redux-logger
以下の辺りに注意しながら実装する。
{"Menu1":{"counter":0},"Menu2":{"counter":0}}
const mapStateToProps = state => { return { counter: state.Menu1.counter } }
考えて設計して欲しい感がある。
Componentを跨ぐという初歩的なことも良く解らないので、
ネットを調べて以下のページを発見したのでやってみる。
Menu1、Menu2のContainerを集約するContainer, Action, Reducerを、Menu12に集約。
無事、動作。
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/redux_app