入門React redux ~reduxの概念は繰り返し使ってなれよう~

Reduxとは

Reactでのフロントアプリケーション開発の際にセットで扱われることの多いのがこのreduxです。

A predictable state container for Javascript apps.
公式サイトより。

以下の4つを特徴としています。

・予測可能
・中央化
・デバックがしやすい
・柔軟性のある

なぜこれを使う必要があるのか

あるコンポーネントで定義した値を別のコンポーネンントでも使いたいという場合に、ReactではPropsというものを使って親コンポーネントから子コンポーネントへと値を渡します。必ずこの方向になっていて、単方向データフローはReactの三代特徴のうちの1つです。

しかし、孫やさらに別の複数のコンポーネントで値を使いたいといった場合に、バケツリレーで渡していくのはしんどいということでこのReduxというものを使ってコンポーネント全体で値を管理できる仕組みが作られました。

【Reduxのアーキテクチャー】

これによってデータが単方向になることが保証され、状態の変更が追いやすく破綻しにくいシステムを作ることができます。

Reduxの構成要素

redux公式のサンプルを元にreduxの構成要素の概要について説明します。

state

コンポーネントの状態を表す値を保管するためのものです。コンポーネントの「現在の状態」を扱うためのものです。コンポーネントの表示を変えたりするためにstateを更新します。

公式では stateとして数値リテラルの0が直接reducerに渡されています。

export default (state = 0, action) => {

Reducer

Actionとstateを受け取って、新しいStateを返します。

※語源は化学の Reduce(還元)です

CuO + H2 → Cu + H2O

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

store

state(データ)を保管し管理するもの。

const store = createStore(counter)

action

actionとは 実態はJavascriptのオブジェクト。
actionは必ずtypeというメンバを必ず持ちます。

{type: 'DECREMENT'}
{type: 'INCREMENT'}

dispatch

dispatchがreducerを呼び出して、よびだされたreducerにより値が操作されます。

onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
onDecrement={() => store.dispatch({ type: 'DECREMENT' })}

まとめ

Reducer、action、 storeなど複数の新しい概念が登場するためはじめは理解するのが簡単ではないと思いますが、繰り返しコードを読んだり実際に書いたりしてならしていきましょう。

参考

https://redux.js.org/
https://github.com/reduxjs/redux/tree/master/examples/counter