自分はちょっと手を動かさないと色々分からないので、まずはサンプルを作成してみる
https://webbibouroku.com/Blog/Article/react-redux-todo
Reduxのインストールまで終わったらさっきインストールしたVisual Statdio Codeにフォルダ読み込ませて開発していく
actions
components
containers
reducers
このフォルダを作成して中にTodo.jsを作成していく
早速
import registerServiceWorker from ‘./registerServiceWorker’;
が存在しないとエラーになる。Failed to compileって起動すると表示される
こいつ使えなそうなので、元々あった
import * as serviceWorker from ‘./serviceWorker’;
～～
serviceWorker.unregister();
をそのまま利用する。→また動いたのでOKかな。というかこれコードの反映を即画面上に反映するのな。。。
いままでコンパイル→デプロイ勢だったのでちょっと感動
https://webbibouroku.com/Blog/Article/react-redux-todo
一応それ以外は上記のサイトの記載内容を追っていくだけでTodoというかDOMに追加は出来た。
まずは馬鹿の一つ覚えみたいにとりあえずコピペ
ひとつずつ覚えていこう
とりあえずフォルダ構成について。上記サンプルでは
actions
components
containers
reducers
としたけど、これはそのままReduxの構成にしたがっているパターンっぽいです。
https://qiita.com/bmf_san/items/58959501e6eae3609676
せや、ドメインで分割したろパターン
Javaの構成が機能ごとにパッケージ分けていたので
なんとなくこれが今の自分には一番しっくり来る
[redux ディレクトリ構成]とかで調べるとアホほど記事が出てくる
結構悩んでいる模様
https://qiita.com/kiita312/items/7fdce94912d6d9c801f8
上記を参考にした
まだなんのこっちゃ分かってはいないけど
actions
たぶんそのまま値を渡すだけ
components
reactのみで完結させるものをつめる
containers
react-redux.connect()をつかってreduxにつなぐ
reducers
状態を作って返すだけ。元々のパラメータの値を変更しちゃだめ
こんな理解をしてから公式のチュートリアルを読んでみる
https://redux.js.org/basics/basic-tutorial
なんとなく言いたいことが分かるようになった
自分で書けるかどうかは置いて置いて
https://github.com/facebook/flux/tree/master/examples/flux-concepts
たぶんココの図が結構すべてなのかな感はある。
個人的にはここのがなんとなくイメージしやすかった
https://katsuya-place.com/index.php/2018/08/07/react-redux/
今の理解だとなんとなくReduserからJavaとかに投げて勝手知ったるソースコードでもりもりかいて
値返してそこからStoreに返して、、、見たいな事は出来そうね。
api的な使い方で
さて、実装の練習。
見た目をかっこよくするためにマテリアルUIを入れておく
https://material-ui.com/
npm install @material-ui/core
いつものようにインストール。
https://v0.material-ui.com/#/components/card
こんな感じでサンプルをみながら色々できる。
まず自己紹介ページを作ってみよう
というかMaterialUIのインストールって色々必要なのね
npm install @material-ui/icons
npm install @material-ui/core
みたく必要なものをインストールしていかないと使えない
npm install @material-ui/*
とかで全部行けないのかな
とりあえずエラーになったね
npm install @material-ui/
とかしてもインストールできない。ふーむ。。。まぁいいや。必要に応じて入れていこう
とりあえずMaterialUIをつかうっていう意味なら
https://qiita.com/yoskeoka/items/bfaaea4973c5abb12ff6
こことか良い気がする。
ただ、インストールは
npm install @material-ui/icons
npm install @material-ui/core
見たいにして、
import Button from ‘@material-ui/core/Button’;
import IconButton from ‘@material-ui/core/IconButton’;
import AddIcon from ‘@material-ui/icons/Add’;
//import ModeEditIcon from ‘@material-ui/icons/ModeEdit’;
import AddShoppingCartIcon from ‘@material-ui/icons/AddShoppingCart’;
import DeleteIcon from ‘@material-ui/icons/Delete’;
こんな感じにして書くと動いた。でもModeEditだと動かなかったので、これは消した。
でもちょっと一個ずつがんばってなんか画面作ってみよう。
コメント