スポンサーリンク

いつになったら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

(1)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

(2)Actionの作成

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

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

src/actions/index.js
image

src/utils/actionTypes.js
image

(3)Reducerの実装

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

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

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

initialAppState は初期状態

src/reducers/calculator.js
image

src/reducers/index.js
image

そろそろ疲れてきたゾ。

(4)Storeの作成

データの状態を表すStore

src/index.js の修正
image

(5)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?)を私がなんとなく好きになれないところである。

(6)ドキドキしながら、

npm start

image image

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

image

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

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

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

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

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

image image

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

image

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

image image

次のエラーは、どのファイルでエラーしているのかぱっと見ではわからないが、どうやら、’bindActionCreator’, ‘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

スポンサーリンク