スポンサーリンク

いつになったらRedux入門できるの？（3）containerでタイプミスしやすい

以下の続き

http://twosquirrel.mints.ne.jp/?p=12681

引き続き、以下のサイトの写経をしていく。

電卓アプリで学ぶReact/Redux入門(実装編)
nishina555
2016年11月22日に更新
http://qiita.com/nishina555/items/9ff744a897af8ed1679b

（環境）
Windows8.1
Node.js v6.9.1
Visual Studio Code

（１）Componentの作成

Containerの中身をComponentに分解？

src/containers/CalculatorContainer.js
image

各Componentの作成

これらは、ReactでViewを書いているだけのよう。なんで行末に「; 」が必要ないのかわからない。

src/components/NumBtn.js
image

src/components/PlusBtn.js
image

src/components/Result.js
image

（２）Actionの作成

Componentで発行されるActionの定義を行う。

utilsというフォルダがよく分からない。他のところではあまり見ないような、、、

src/actions/index.js
image

src/utils/actionTypes.js
image

（３）Reducerの実装

ActionのロジックにあたるReducerを作成

管理しておくべきデータの状態

「押されたボタンの値(inputValue)」
「合計値(resultValue)」
「計算結果を表示するかどうか(showingResult)」

initialAppState は初期状態

src/reducers/calculator.js
image

src/reducers/index.js
image

そろそろ疲れてきたゾ。

（４）Storeの作成

データの状態を表すStore

src/index.js の修正
image

（５）Containerの作成（React.jsとReduxの結合）

ComponentとActionを、Containerの中で連携させる

なんか、ここ、かなり難しくて、理解不能、、、

写経する。

src/containers/CalculatorContainer.js
image

src/components/NumBtn.js
image

src/components/PlusBtn.js
image

src/components/Result.js
image

なんか、同じことを何回も繰り返し書いていて、Railsの「DRY（Don’t Repeat Yourserlf）」がなつかしい感じがした。同じことを何回も書かなければならないところが、Javascript（Redux?）を私がなんとなく好きになれないところである。

（６）ドキドキしながら、

npm start

image　image

がっくし。しかし、エラーが具体的に書いてある。

image

<NumBtn n={1} onClick={() => actions.onNumClick(1)} />

の、onClick のあとの、 = を入れ忘れていた。しばらく分からなかった。

意味がよく分かっていないと、こういうミスが起こりうる。

できる限り、理解しないと、、、

上記を訂正して、もう一度、npm start

image　image

あ、なんか、src/containers/CalculatorContainer.js の最後の方、ちゃんと記載していなかった。

image

抜けている部分を追加する

image　image

次のエラーは、どのファイルでエラーしているのかぱっと見ではわからないが、どうやら、’binｄActionCreator’, 'PlusBtn’, CounterContainer’ をタイプミスしているらしい。探して訂正。

image　image

image　image

そのほかも、ほとんどのタイプミスが、src/containers/CalculatorContainer.jsにあった。

だって、Container、すごく難しくて、長くて、わかりにくいし、、、次回以降、Containerの内容をなるべく理解するように努力して、タイプミスを減らしたい。

image

まだあった！

image

大文字と小文字を一個間違えるだけでもダメとは、、、しかも、一文字目、、、これ、1文字目が小文字の場合と大文字の場合があって、よくわからない！

image　image

お！できたのか！？

image

この画面で、 8 + 9 +　を順番にクリックすると、Resultのところにちゃんと　17 と表示された！( = （イコール）ボタンが欲しいなあ。。。)

image

初redux+react !

reduxやろうと思ってから、Javascriptの本を3冊買って、Learn JavaScriptもやって、1ヵ月くらいかかった。環境構築も最初は、「Railsより無理そう！」といった感じであったが、環境構築は、"create-react-app"　無しには事実上無理であった。

やっと、Redux入門できた。意味あるのかなあ。

次は、以下のあたりを写経してみたい。

最終的には、react+redux+firebaseでクイズサイト（+monaca　でクイズアプリでも）を作りたい。

 

React + Redux + Firebaseで作るTodo App
gonta616
2016年12月22日に更新
http://qiita.com/gonta616/items/278a7e81a8b624d9621e

スポンサーリンク

Javascript

Posted by twosquirrel