Edited at

個人的React周りベストプラクティス③ - React・Reduxパッケージ・ミドルウェア編

More than 1 year has passed since last update.


前の記事

前回:個人的React周りベストプラクティス② - 準備編

一番始め:個人的React周りベストプラクティス① - 構成編


パッケージ


axios

httpへのリクエストをするAJAXを対応してくれる

プロミスで返り値を返してくれるのでredux-promiseと合わせればすごく楽


redux-actions

既存のReduxのActionはオブジェクトであれば動く

それを企画を統一しコーディング規約としたものがFlux Standard Action(FSA)

そのFSAに則ったActionを生成するのがこのパッケージ

これを使うことで規約に従ったコードを書くことができ、新人が参入しやすくなる。


material-ui

既存のHTMLタグだとデザイン的に物足りないなって思った時に、簡単にスタイリッシュなUIパーツを実装できる。

インストールしなくてもまったく問題ないが、以降の記事ではインストールしたものとして書いていく。

ダイアログも簡単に作ることができる

image.png


react-router

Reactでページ遷移を実現するためのもの


ミドルウェア


redux-promise

ActionCreator内でプロミスを使用すると自動的に非同期で処理してくれるようになるミドルウェア

redux-actionsを作った人と同じ人が開発したらしい


redux-logger


  1. 変更前State

  2. Actionのタイプ

  3. Reducerに渡されたAction

  4. 変更後State

Actionが実行される度に上記情報をコンソール画面に表示するデバッグ用のミドルウェア

firefoxでの表示例(「Object」をクリックで中身も見ることができる)

image.png


次の記事

個人的React周りベストプラクティス④ - Lamdaパッケージ編