前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。 カウンターアプリ ver.1 コード（ファイル名押下でコード展開） redux container compon…

前回の mapStateToProp に続いて mapDispatchToProps の公式ドキュメントについても google 翻訳の力を借りて目を通したので、残しておきます。 react-redux.js.org

React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google …

ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感（？）を感じたので、現実から逃げずにちゃんと勉強していくことにしました。 今回は 下記公式ドキュメントを元に Context API について理解したいと思います。 ja.reactjs.org Context …

前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケー…

久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ（Single source of truth） 2. stateは読み込み専用（State is read-only） 3.…

ちょっとした小ネタを思いついたので書いておきたいと思います。 JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白（スペース）が開発者ツール上で見えたりして気になったりしないでしょうか？ <a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a> ▼ Chr…

今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。 今回は少し特殊な例ですが、複数の Provider を使ってのコンポーネントの連携のやり方を紹介しつつ、サンプルを作りながらReact + Reduxの実装を振り返りたい…