正規化は、データを深くネストされたオブジェクト/配列の代わりに、フラットで関係的な構造に格納することを意味します — ルックアップテーブルでidをキーとして。これはデータベース正規化と同じ考え方をクライアント状態に適用したもので、更新とルックアップを効率的で一貫性のあるものにします。
ネストされた/非正規化された状態の問題
js
: [
{ : , : , : { : , : } },
{ : , : , : { : , : } },
]
重複したネストされたデータは多くの場所で更新する必要があり(不一致のリスク)、項目を見つけるには配列をスキャンする必要があります(O(n))。
// ✅ flat lookup tables keyed by id, with references by id
{
posts: {
byId: { 1: { id: 1, title: "A", authorId: 10 }, // reference the author by id
2: { id: 2, title: "B", authorId: 10 } },
allIds: [1, 2], // order/iteration
},
users: {
byId: { 10: { id: 10, name: "Ann" } }, // each user stored ONCE
},
}
各エンティティは1回だけ格納され、idでキーされます。関係はidリファレンスのみです。
state.users.byId[10]; // ✅ O(1) lookup by id
state.users.byId[10] = { ...u, name: "Bob" }; // ✅ update Ann ONCE → reflected everywhere
state.posts.allIds.map(id => state.posts.byId[id]); // iterate via the id list
✓ Single source of truth per entity → no duplication, no drift
✓ O(1) lookups/updates by id (vs scanning arrays)
✓ Easy to update one entity and have all references reflect it
✓ Simpler to manage relationships and merge new data
Redux Toolkit's createEntityAdapter generates normalized { ids, entities }
structures + CRUD reducers automatically. normalizr can normalize API responses.
正規化はクライアント状態(特にRedux)で関係的/コレクションデータを管理するための標準パターンです。
エンティティごとに単一の情報源を強制し(一度更新すればどこにでも反映)、id ベースの高速ルックアップを提供し、深くネストされた重複データのバグとパフォーマンスの問題を回避します。
更新され、相互参照される関連エンティティ(ユーザー、投稿、コメント)のリストを持つアプリの場合、ストアを正規化する — しばしばcreateEntityAdapter経由で — は状態を一貫性のある効率的な状態に保つための重要な技術です。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する