Reduxの変化と、なぜ今も新規プロジェクトに追加されるのか

単純なReduxカウンターでさえ、3つの別々のファイルを作成し、数十個の定数を宣言し、レデューサーで巨大なswitch-caseを書かなければならなかった時代を覚えていますか？そのため、何千人もの開発者がこのライブラリを嫌いになりました。しかし、Reduxはもう2015年のそれではありません。

開発者たちは問題を期に認識し、Redux Toolkit（RTK）をリリースしました。今日では、このライブラリでの作業の標準となり、Reduxが以前批判されていたほぼすべてが取り除かれました。

そもそもなぜグローバルステートマネージャーが必要なのか

小さなReactアプリケーションでは、通常のprops受け渡しや組み込みのReact Contextで十分対応できます。問題が起きてくるのは、プロジェクトが成長したときです。あるフォームのデータを同時にサイドバー、サイトのヘッダー、解析に更新する必要がある場合、propsの連鎖は混乱します。

Reduxはアプリケーションの状態を一つのオブジェクト（store）に保持します。このオブジェクトは直接変更しません。代わりに、アクションをディスパッチし、純粋関数であるレデューサーが古い状態に基づいて新しい状態を計算します。

このアプローチは明確な予測可能性をもたらします。アプリケーションで何か问题时、Redux DevToolsを通じて状態変更の完全な履歴を確認し、ユーザーのアクションを段階的に追跡できます。

Redux Toolkitがどのように жизньを楽にしたか

以前では、単一のフィールドを更新だけでも、オブジェクトのイミュータビリティを手動で追跡し、面倒なスプレッドを作成する必要がありました。

Redux ToolkitにはImmerが組み込まれています。レデューサー内のコードはまるで状態を直接変更しているかのように記述でき、ライブラリがこれを自動的に安全なイミュータブル更新に変換します。

基本的なカウンター例を見てみましょう：

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() => console.log(store.getState()))

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

アクショントypes用の別ファイルは不要です。createSlice関数により、レデューサーとアクション生成の両方が作成されます。

Reduxが必要なケースと、なしで済ませたほうがいいケース

Reduxの作成者であるDan Abramovは、数年前に「You Might Not Need Redux」を書きました。このアドバイスは今も有効です。

Reduxは以下の特定の状況で便利です：

• アプリケーションの様々な部分で активно 変更される大量のデータがある。
• 状態の更新ロジックが複雑で、厳密なシーケンスが必要。
• すべてのイベントの透過的な履歴を持つ便利なデバッグが必要。
• チームで多くの人が作業しており、单一の明確なデータ処理パターンが必要。

データが単に数レベル下に传递するだけでよいシンプルなアプリケーションがある場合、ここでReduxを持ち出す価値はありません。追加の抽象化はコードを複雑にするだけです。

クイックスタート

プロジェクトを立ち上げる一番簡単な方法は、Viteと готовый Redux ToolkitとTypeScriptテンプレートを使用することです：

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Next.jsの場合は、Vercel готовыйテンプレートがあります：

npx create-next-app --example with-redux my-app

既存のプロジェクトにライブラリを追加する場合は、2つのパッケージをインストールするだけで十分です：

npm install @reduxjs/toolkit react-redux

まとめ

Reduxコアは約2 KBです。このライブラリは長い間无尽のボイラープレートコードの时代を超えています。Redux Toolkitと組み合わせることで、大規模プロジェクトでも狀態管理のための厳密で予測可能なツールが得られます。