Redux ToolkitでReduxを簡略化

ReduxはReactエコシステムで広く利用されている状態管理ツールです。しかし、従来のReduxは、ストアの作成、コードの重複が多い複数のファイルの作成、明確なロジック記述の規約がないなど、冗長で使いにくいという不満がありました。Redux Toolkitは、これらの問題を解決するために生まれました。ReduxJSチームによって開発されたRedux Toolkitは、Reduxコードを迅速、完全、そして統一された規約に従って記述することを可能にします。

Redux Toolkitは、ストアの作成を簡素化するだけでなく、デバッグと状態更新プロセスの追跡のためのミドルウェアとRedux Devtoolを組み込んでいます。これにより、開発者の時間と労力を節約できます。

従来のReduxでは、action typeの宣言が冗長で、この値はactionの作成とreducerでのみ使用されていました。Redux Toolkitは、createAction関数を提供することで、より簡潔にactionを作成できます。この関数は文字列を受け取り、typeとして渡された文字列値を持つactionを初期化する関数を返します。

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

さらに、createActionはactionのtypeに簡単にアクセスできるため、コードの記述量をさらに削減できます。

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkitは、従来の方法よりもシンプルで直感的なreducerの作成を可能にするcreateReducer関数も提供します。createReducerを使用すると、各キーがtype、値がreducer関数であるオブジェクト参照のような直感的なロジックでreducerを初期化できます。

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducerは、状態の初期値と、reducerが状態の変更を監視および更新するのに役立つオブジェクトの2つのパラメータを受け取ります。ES6のcomputed propertyの特性を利用することで、上記のコードをより簡潔に記述できます。

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

createActionとcreateReducerのおかげで、Redux Toolkitでのストアの作成は、従来のReduxよりもはるかにシンプルで理解しやすくなりました。コードは明確に整理され、読みやすく、保守も容易です。Redux Toolkitは、Reactアプリケーションの状態管理を簡素化し、開発者がボイラープレートコードではなくビジネスロジックに集中できるようにします。

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store