Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
「Redux は学習コストが高い」などと言って useState(または useReducer)と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち(誤解)を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート(状態)を持たせる役割があります。次のようなカウンターアプリ
はじめに Reduxのチュートリアル用のプレゼンテーションをほぼそのまま乗っけます。間違っているところとかあるかもですのでご承知ください。 比較用のTodoアプリをどうぞ 1.Reduxの基本 Reduxの基本構造 単方向データフロー 純粋な関数の多用 Action Actionは起こったイベントを表す interface PayloadAction<P, T extends string, M, E> { type: T; payload: P; meta: M; error: E; } action.type - Actionを識別する文字列 アクションの名前はシステムが行うことではなく実際に起こったことを書く 例) (x) 'CREATE_COMMENT' (o)'POST_COMMENT' action.payload - Actionに必要なデータ action.meta - a
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript(TypeScriptではなく) + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く