Tech

React初心者のRedux解説

投稿日:2019年7月24日 更新日:

はじめに

こんにちは、nukkyです。
今回は初心者(私)による初心者の為のReduxの基本について備忘録がてらまとめていきます。

Reduxとは

そもそもReduxってなに?

Reduxは、Fluxアプリのデザインパターンにヒントを得て、JavaScriptアプリでStateを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngularといった別のフレームワークと併用することもできます。

Reduxのサイズは非常に小さいにもかかわらず、アプリの各コンポーネントが自分のStateに直接アクセスできるようになります。このとき、子コンポーネントにpropsを送信する必要も、親コンポーネントがデータを受け取るのにコールバック関数を使う必要もありません。

Fluxとは

Fluxとは、Facebookが提唱したアプリケーションのデータフロー管理のためのアーキテクチャパターンです。Stores、View、Actions、Dispatcherなるパーツで構成されており、役割は以下の様になっています。

  • Stores: アプリケーション全体のデータとビジネスロジック
  • View: React等のコンポーネント
  • Actions: View等から発火されて作られるイベント
  • Dispatcher: 全てのアクションを受けてStoreにイベントを発火する

gitにある画像がわかりやすいのですが、以下の様な流れになっています。

全てのデータのオペレーションがDispatcherに集約されており、Store側ではDispatcherから送られてくるActionに対してデータを処理する関数を登録してあります。
すなわちActionを発行して、Dispatcherがそれを検知しStoreを更新、そしてViewが描画されると言う流れです。データフローが単一方向になることで理解しやすく、また状態を管理しやすくなります。
もし興味があればReduxの源流となるので確認してみてください。
https://github.com/facebook/flux/tree/master/examples/flux-concepts

Reduxの3原則

Reduxには、以下の3つの原則があります。

  • Single source of truth (信頼できる一つの情報源)
  • State is read-only (状態は読み取り専用)
  • Changes are made with pure functions (変更は純粋な関数によって行われる)

それでは一つづつ見ていきます。(ここで出てくる用語の解説は後述)

Single source of truth

アプリケーション全体の状態(state)はツリーの形で1つのオブジェクトで作られ、1つのストアに保存する。
つまり状態をシングルツリー構造にすることによって、信頼性が高まり、デバッグやアプリケーションの動作の予測が容易になります。

State is read-only

状態を変更する手段は、変更内容をもったアクションオブジェクトを発行したときのみとします。これにより中央集権的に管理することが可能となり、デバッグが容易となります。

Changes are made with pure functions

ここで言う関数とは「Reducer」のこと、「Reducer」とはアクションがどのように状態を変更するかを行う関数です。
「Reducer」は状態とアクションを受けて、新しい状態を返す関数であり、ポイントとしては、現在のstateオブジェクトを変更することはせずに、新しいstateオブジェクトを作って返す。
状態の変更を統一するために、「Reducer」は外部要因に作用されない単純な関数として実装するべきです。

Reduxの要素

Reduxは異なる役割を持った以下の要素で構成されています。

  • Action
  • Store
  • State
  • Reducer

それでは一つずつ見ていきましょう。

Action

Actionは「何をする」という情報を持ったオブジェクトです。Actionはtypeプロパティを必ず持つ必要があります。
また、ActionはReactの状態を更新することのできる唯一の方法であり、以下のように定義されます。

ActionCreator

ActionCreatorはActionを作成するメソッドです。これを実行することで特定のActionが生成され返却されます。

Store

Storeはアプリケーションの状態(state)を保持している場所です。
Storeはアプリケーション内で一つ存在し、一つのstateを保持しています。
Storeの役割は、stateを保持することやstateへアクセスするためのgetState()、stateを更新するためのdispatch(action)、そしてリスナーを登録するためのsubscribe(listener)を提供する事です。

Storeをつくるには、combineReducerでつくられたReducerをcreateStore()へ渡します。

stateの初期値を渡したい場合にはcreateStoreの第2引数に入れます。

State

Stateとはアプリケーションの状態を表します。
以下のサンプルコードでは「現在選択されている表示/非表示」、「todoのリスト」をstateとして保持します。

Reducer

ReducerはActionとStateから、新しいStateを作成して返すメソッドです。三原則のところでも触れましたがポイントは、引数のStateを更新することはせず、新しいStateのオブジェクトを作成して返します。
Reducerのメソッドは副作用を起こさないpureな関数でなければならず、AというStateに対して外部要因による変更はなく、毎回必ずBというStateを返すような関数でなければなりません。

このサンプルソースではswitch文でActionsのtypeを判断し、処理を行います。
この際、もし該当するtypeがなければ、Stateを変更してはいけないのでdefaultで今のStateをそのまま返すようにします。
またReducerでは直接Stateを書き換えてはいけないので、Object.assignでは最初に空のオブジェクト{}を渡して、Stateをコピーするようにしています。

Reduxでは最初にreducerはstateがundefinedで呼び出します。その際に初期値を設定します。


 

結局Reduxって必要なの?

Reactというか他のフレームワークもですが、基本的に親子関係にないコンポーネント同士でのやりとりが色々と面倒で基本的な機能のみではスムーズにできません。Reactでは、それが必要な場合にはFluxのパターンに従ってグローバルなイベントシステムを構築せよとしています。ここがReduxの出番だと思います。
ただ開発規模や既にルール化してあるものに無理やり組み込んだりとかする必要はないと思いますので以下の様な場合はReduxでなくても良いかもしれません。

  • コンポーネント間でStateの共有や加工を行う方法を既に定義済みの場合
  • ReactなどのReduxを使用としているフレームワークの経験がまだ浅い場合
  • シンプルなUI変更などぐらいしか行う予定がなく、Reduxストアに含める必要もなければコンポーネントレベルで扱えるようにする必要もない場合
  • ビューごとにフェッチするデータソースが1つしかない場合

さいごに

Reduxは情報も多いですし私が作ろうとしているアプリを作成するのには必要かなと感じています。まだまだ勉強中の身ですが記事にまとめた事でより理解が深まったと思います、次回も是非お付き合いいただければと思います。

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE) React.js&Next.js超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

[Unity] Terrain(地形)を使ってみた

1 はじめに2 Terrainの追加方法3 Terrainの使い方4 Create Neighbor Terrain5 Paint Terrain5.1 Raise or Lower Terrain5 ...

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

【Flutter】背景ぼかしなど簡単な画像操作をImageFilteredで行う

1 はじめに2 準備3 実装3.1 ぼかし(ブラー)3.2 マトリックス3.3 BackdropFilterとの違い4 さいごに5 おすすめ書籍 はじめに 背景のぼかしや、画像のローテートなど、簡単に ...

Apple製のフレームワークCombineを触ってみた

1 はじめに2 Combineとは3 Publishers3.1 Future4 Subscribers4.1 sink4.2 assign5 Operators5.1 Prepend5.2 Appe ...

MLKitで使えるTensorflow Liteについて調べてみた

1 はじめに2 そもそもTensorflowとは3 そしてTensorflow Liteとは4 Tensorflowの環境構築4.1 pyenv, pyenv-virtualenvをインストール4.2 ...

フォロー

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。