Reduxってどのような時に使うもの?
Reactを学ばれている人の中には「Reduxってどのような時に使うもの?」という疑問をお持ちの方がいらっしゃるかもしれません。
そこで、本記事では具体的なアプリを例にして簡単に説明しようと思います。
Reduxとは
ReduxはJavaScriptの状態管理ライブラリです。
下記はReduxの公式ドキュメントですが、赤線箇所に記載されているようにアプリケーション全体で使用するデータ(グローバルデータ)の管理に役立つライブラリです。
私は以前、下記の記事でWeb Developer Roadmapというものを紹介しましたが、その中にもReduxは登場します。
Reactの横にReduxが存在しています。
注意点としては、ReduxはReact専用の状態管理ライブラリではないということです。(下記の赤線箇所でもReduxはReactだけではなく、他のライブラリとも一緒に使えるという旨の記載があります)
Reduxってどのような時に使うもの?
Reduxの公式ドキュメントではReduxをいつ使うかについて具体的な例が紹介されています。
とりあえずは「アプリの規模が大きくなっていろんな箇所で共通のデータを使用するようになった時にReduxのような状態管理ライブラリの使用を検討すればよい」という理解で良いと思います。
RealWorldの記事の紹介
私は以前、下記の記事でRealWorldというGitHubリポジトリの紹介を行いました。
RealWorldの中で登場するConduitというアプリを例にしてReduxについて説明しようと思います。
Conduitアプリについては下記のGitHubリポジトリの環境一式をダウンロードして動かしています。
クライアント側はReactとReduxを使って実現されています。
Conduitアプリの画面の例(ログインなし)
誰もログインしていない状態でのトップ画面です。
1つめの記事(Bobによって投稿された)の画面です。
2つめの記事(Chrisによって投稿された)の画面です。
Conduitアプリの画面の例(Chrisでログイン)
Chrisでログインした状態でのトップ画面です。
右上にログインしている人(現在はChris)の情報が表示されています。
1つめの記事(Bobによって投稿された)の画面です。
コメント投稿の箇所にログインしている人(現在はChris)の情報が表示されています。
2つめの記事(Chrisによって投稿された)の画面です。
ログインしている人がChrisなので変更と削除が可能となっています。
Settingsの画面です。
ログインしている人(現在はChris)の情報を使って表示されています。
以上、Chrisでログインするといろんな箇所でChrisの情報を使って表示が行われていますが、Reduxを使ってデータを集中管理することで実現されています。
Redux DevToolsで状態を見よう
Redux DevtoolsをインストールすることでReduxの状態を確認することができます。
Chrisがログインしている時には「currentUser」にChrisに関するデータが保存されています。
Chrisがログアウトすると「currentUser」のデータはクリアされます。
Bobがログインしている時には「currentUser」にBobに関するデータが保存されています。
以上、currentUserのデータは誰かがログインすることによって内容が書き換わっており、画面の表示もデータの内容によってその都度変更されることがおわかりいただけると思います。
Reduxは2通りの書き方がある
現在はReduxの書き方は2通りあります。
1.従来の書き方
2.Redux Toolkitを使った書き方
公式ドキュメントの「Getting Started」では同じ内容の処理を2通りの書き方で紹介しています。
1.従来の書き方
2.Redux Toolkitを使った書き方
2通りのコードを下記に紹介します。(コメント箇所削除)
1.従来の書き方
import { createStore } from 'redux'
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case 'counter/incremented':
return { value: state.value + 1 }
case 'counter/decremented':
return { value: state.value - 1 }
default:
return state
}
}
let store = createStore(counterReducer)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/decremented' })
2.Redux Toolkitを使った書き方
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
incremented: state => {
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())
store.dispatch(incremented())
store.dispatch(decremented())
以上、「Reduxってどのような時に使うもの?」に関してConduitというアプリを例にして簡単に紹介しました。
Reduxに興味を持たれた方はReduxの公式ドキュメントに詳しいチュートリアルがありますので一度確認されてはいかがでしょう。