https://naga-note.info/blog/2018/10/22/it/react-2/
https://naga-note.info/blog/2018/10/23/javascript/react-3/
の続きです。
今日は画面遷移について実装してみようと思います
サイドメニューをクリックしたらかわるやつ
このページが参照になりそう
といってもいまいち分からないので、alert仕込んで、ボタンを押したらそれが動くようにする
そのままalertってうったら起動したタイミングで立ち上がりまくる。。。ぐぬぬ。。。
drawerOpenみたく書いてみよう。。。
<ListItem button key={text} onClick={index % 2 === 0 ? this.chengePage1 : this.chengePage2}>
とかやったらボタンクリックのタイミングで動くようになった。ラムダの書き方がいまいち分からないJava7で止まっている勢なので、
読み方に苦労する。。。
でもまぁindexループしているので、ここで条件書いて、呼び出し形式にすればうまく動く。
直接書いたときと何が違うのか分からない勢。。。
だって書いてる内容これよ？
HTML部分に直接書くとコンパイル(？)時に実行される(Javaのコンストラクタ扱い？)とか勝手に見切りをつけて次に行く
次はこのchangePageでmain部分の文字を書き換えることが出来るようにしてみよう。。。
あーーJavaScriptの知識が足りない！！！絶対的に足りてない！！！！きっとJavaScript書いてた人というか
フロント系いじってた人は抵抗なくすらすら書けるやつだこれ！！！
chengePage1 = () => {
this.mainmessage.viewMessage = “ボタン1が押されました”;
};
chengePage2 = () => {
alert(‘ふが’);
};
mainmessage = {
viewMessage : “表示テスト”,
};
~~
<Typography paragraph>
{this.mainmessage.viewMessage}
</Typography>
とかすれば変わるけど、変わるタイミングがおかしい。。。
ボタンを押してメニューを開いたり閉じたりしたら動くだけ。ボタン押下したタイミングで動かない。。。
で、React + redux 再描画
とかで検索をかけると、たぶんこれ書き方違うわ。App.jsは結果を表示するだけですね。。。
書き方を学んでいきましょう。。。actionとかまったくつかってないわ。。。stateとか言われても。。。
世の中の初心者向けはまったく初心者が躓くところが書いていないですわ！！！！
これくらいいじってから、また初日にやったTodoリストの追加についてみていこう
https://webbibouroku.com/Blog/Article/react-redux-todo
これをまた実装していく。今度はもちょい内容がわかるはず…！
たぶん上記サイトに書いていてあることの繰り返しになると思うけど、自分の言葉で書いていく
Storeという状態を保持するものがReduxでは必要(React？たぶんフレームワーク的な話なのでRedux)
createStore.jsは値保持用の関数(クラスって言い方はやっぱり違うんだろうなー)
JavaScriptって変数に何でも突っ込めるのがやっぱり違和感だけど、ココでは
storeにcombineReducersってのとapplyMiddlewareってモノを持っている
applyMiddlewareはlogなので、combineReducersってのだけ気にしていればOK
combineReducersは既存のメソッドで複数の状態を保持するときの常套句っぽい。
今回はtodoだけだけど色々他にも持つことになるんでしょう。
たぶんJavaだとList<Status> みたいな感じかな
reducers
ココでうけとったstateを元に何か色々してstateを返す
「ReactにReduxを組み込む」って単語が？？？ってなる。
一旦ReactとReduxについて区別しないで進めてみようと思う。
ここで前回はまらなかったであろうimport registerServiceWorker from ‘./registerServiceWorker’;にはまる
こんなのねーよ！っていわれて探してもない。インストール漏れも元々npm startで動いていたし考えづらい
元々のコードが
import * as serviceWorker from ‘./serviceWorker’;
serviceWorker.unregister();
ふむ、、、このサイト情報が古い、、、？つっても一年くらいなのになーーー
Webのフロントは情報の入れかわりが早い！！(こういった話ではない？)
組み込むってさっきかいたcreateStore()をProviderに組み込むって話ですね。いや、そういうことを元々かいていたのかもしれないけど。。。
ココでProvider ってのをつかって渡してあげる模様
index.jsが呼ばれて、index.js内でApp.jsが呼ばれているからそっちにとんで、
そのときにstoreが引き渡されて渡される。
さて、そのstoreがどうつかわれるかはこのあと見れば分かるのかな
ここから具体的なコンポーネントについて作成していく
import React from ‘react’;して、React.Componentをextendsした実態を作成する感じ？
ココには具体的なHtmlを書いているので、なんとなく分かる
クラスの中にHtmlタグそのまま書いてるのに違和感あるけどそういった感じなのかな
あとexport defaultのおまじないがまだ分からないけどおまじないだと思っておきましょう
この辺でそろそろ自動でインポートしてくれないことにストレスを感じ始める。
はじめのうちは流れを意識できるので良かったけど、はしょりたい。
Auto Importってプラグインがある模様
https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
をインストール
よし、便利。
ActionはReducerで処理するためのパラメータを渡すもの
これが実行されたらこうしてね！！みたいな内容を記載する。
keyとvalの集合体なのは分かるんだけど、やっぱり型宣言が無いのは違和感があるーーーぐぬぬ
いや、何でも渡せていいんだけどね。
さっき書いたReducerをちゃんと追加するように修正していく。
これは読んでもわかりやすい。
Object.assign({}, state);このあたりがよく分からんけど、なんとなくdeepCopyな感じ
元々のstateは書き換えちゃ駄目！ってどこかで見た気がする
あ、下に書いてあったね。
コンテナって概念がいまいち分からん。。。
今の状態を第一引数で、これからしたいことを第二引数で、次の()の中身をComponentに渡せばいいのかな
書いてから情報の流れを図にしないと分からん
ここはちょっと保留
さて、情報の整理。
index.jsからスタート
ココでstoreをProvidするよーって宣言する。provide先はAPPってことかな？
APP.jsは画面を描画するだけ。ココでは処理をしていない
storeって状態を保持するものっていう認識だったんだけど、保持しているのってreducerなのね
APP.jsはあくまで描画するだけ、ココからコンテナを呼んでいる
コンテナは今の状態とおされたときの状態をcomponentのTodoに渡している
componentは画面を描画するための色々を持っている。
画面描画のHTMLもココで保持している。
reducerはstateを返すだけ。
この戻り先がどこ？って話。これをこのコンテナくんが良い感じにしてるのかな？
なんとなく情報の流れはわかったけど、実際に自分で何も無いところからかけるかといったらまぁ自信は当然無し
一個一個していきましょう。
さて、さっきのメニューのボタンを押したら画面の文字列を変更するものについて理解していきましょう。
コメント