見出し画像

Reduxってどのような時に使うもの？

kenpapa

Reactを学ばれている人の中には「Reduxってどのような時に使うもの？」という疑問をお持ちの方がいらっしゃるかもしれません。

そこで、本記事では具体的なアプリを例にして簡単に説明しようと思います。

Reduxとは

ReduxはJavaScriptの状態管理ライブラリです。

下記はReduxの公式ドキュメントですが、赤線箇所に記載されているようにアプリケーション全体で使用するデータ（グローバルデータ）の管理に役立つライブラリです。

画像17

私は以前、下記の記事でWeb Developer Roadmapというものを紹介しましたが、その中にもReduxは登場します。

Reactの横にReduxが存在しています。

画像2

注意点としては、ReduxはReact専用の状態管理ライブラリではないということです。（下記の赤線箇所でもReduxはReactだけではなく、他のライブラリとも一緒に使えるという旨の記載があります）

画像17

Reduxってどのような時に使うもの？

Reduxの公式ドキュメントではReduxをいつ使うかについて具体的な例が紹介されています。

画像3

とりあえずは「アプリの規模が大きくなっていろんな箇所で共通のデータを使用するようになった時にReduxのような状態管理ライブラリの使用を検討すればよい」という理解で良いと思います。

RealWorldの記事の紹介

私は以前、下記の記事でRealWorldというGitHubリポジトリの紹介を行いました。

RealWorldの中で登場するConduitというアプリを例にしてReduxについて説明しようと思います。

Conduitアプリについては下記のGitHubリポジトリの環境一式をダウンロードして動かしています。

クライアント側はReactとReduxを使って実現されています。

画像18

Conduitアプリの画面の例（ログインなし）

誰もログインしていない状態でのトップ画面です。

画像4

１つめの記事（Bobによって投稿された）の画面です。

画像5

２つめの記事（Chrisによって投稿された）の画面です。

画像6

Conduitアプリの画面の例（Chrisでログイン）

Chrisでログインした状態でのトップ画面です。

画像7

右上にログインしている人（現在はChris）の情報が表示されています。

１つめの記事（Bobによって投稿された）の画面です。

画像8

コメント投稿の箇所にログインしている人（現在はChris）の情報が表示されています。

２つめの記事（Chrisによって投稿された）の画面です。

画像9

ログインしている人がChrisなので変更と削除が可能となっています。

Settingsの画面です。

画像10

ログインしている人（現在はChris）の情報を使って表示されています。

以上、Chrisでログインするといろんな箇所でChrisの情報を使って表示が行われていますが、Reduxを使ってデータを集中管理することで実現されています。

Redux DevToolsで状態を見よう

Redux DevtoolsをインストールすることでReduxの状態を確認することができます。

画像11

Chrisがログインしている時には「currentUser」にChrisに関するデータが保存されています。

画像12

Chrisがログアウトすると「currentUser」のデータはクリアされます。

画像13

Bobがログインしている時には「currentUser」にBobに関するデータが保存されています。

画像14

以上、currentUserのデータは誰かがログインすることによって内容が書き換わっており、画面の表示もデータの内容によってその都度変更されることがおわかりいただけると思います。

Reduxは２通りの書き方がある

現在はReduxの書き方は２通りあります。

１．従来の書き方
２．Redux Toolkitを使った書き方

公式ドキュメントの「Getting Started」では同じ内容の処理を２通りの書き方で紹介しています。

１．従来の書き方

画像15

２．Redux Toolkitを使った書き方

画像16

２通りのコードを下記に紹介します。（コメント箇所削除）

１．従来の書き方

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' })

２．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の公式ドキュメントに詳しいチュートリアルがありますので一度確認されてはいかがでしょう。