Redux でコンテナーとプレゼンテーションを分ける
Reduxでコンポーネントを作成する際には、コンテナーとプレゼンテーションに分けるのが良いとされています。
これはコンテナーではconnectのみを書く、つまり、Propsとして渡すデータをstoreから取得し、それをプレ ...
Redux で非同期アクションをディスパッチするには Redux-thunkのようなMiddlewareが必要なのか
Redux を使っていて非同期にアクションをディスパッチするためのMiddlewareとしてはRedux-thunkやSagaなどが有名である。
しかし、実はこういったミドルウエアを使わなくても非同期のアクションのディスパ ...
Redux ユーザーの一つのアクションに対して、アクションはいくつdispatchすべきか
Reduxでアクションを作成するときに、どういった単位で作成するか迷いことがあります。
それに関して考える上で一つの指標があります。
アクションを細かく分割するのか、もしくは一つにまとめるかは状況によるというの ...
Redux の connect で使用されていない Props を渡している場合に気づく方法
Reduxを使っていて、mapStateToProps や mapDispatchToProps を介して、コンポーネントへ Props を渡す際に、実はコンポーネント側で使用されていないものがあったります。
そういったゴ ...
Reduxの良いところ
Reduxを使って数年になりますが、最近ある利点に気が付きました。
アプリケーションの状態をReduxに持つことで、storeの構造をみればなんとなくそのアプリケーションの全体像が分かります。
どういった機能が ...
React MUI の Dialog や Modal について
React MUI の Dialog や Modal は内部的に Portal が使われています。
Portal は指定したDOMの位置にコンポーネントをマウントする仕組みです。
そのため、Dialog や M ...
React MUI の TextField で value が更新されない場合
React MUI の TextField を使っていて、value の値が更新されているのに画面に反映されない場合は、defaultValue を使ってしまっていないか確認します。
defaultValue を使っている ...
Next.jsで.envから定数を読めないときに確認するポイント
Next.jsで.envに定義した定数をクライアントサイドのコードで参照する場合は、NEXT_PUBLIC_ というプレフィックスを付ける必要があります。
NEXT_PUBLIC_HOGE=HOGEまたもう一つの落とし穴と ...
Next.jsのnext/imageを使って親要素のサイズに画像を合わせる
next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。
例えば、親要素が300*300で、画像が300*350だったとします。
縦横の比率は同じままで、親要素を ...
Reactの状態管理ライブラリを比較してみた
引っ越しが落ち着いてきました。
Reactの状態管理ライブラリとしてはReduxがありますが、実は他にもいくつかあります。
おなじみの npm trend でダウンロード数を比較してみました。
意外 ...