Reduxの概要とコンセプト~Redux ToolKitの使い方

Reduxの概要とコンセプト

どうも、ぽっぽです。

Reduxの公式ドキュメントを読んで理解したことを紹介します。

Reduxについて解説して、どうやって正しく使うかを紹介します。最近のおすすめのツール(Redux Toolkit)の使い方とベストプラクティスを教えます。

Reduxとは何か

actionと呼ばれるイベントでアプリケーションのstateを更新し管理するライブラリとパターンのこと

Reduxが提供するパターンとツールは、アプリケーションのstateをいつ、どこで、なぜ、どうやって更新されるか理解しやすくなります。

Reduxは共有されたstateを管理するのに役立つけれど、概念を学ばないとならないし、そのためのコードを書かないとなりません。そういったある種の制限をかけないとなりません。

Reduxが最も有用なときをまとめると

  • アプリケーションのstateが大きくたくさんの場所から参照される
  • stateが頻繁に更新される
  • 更新のロジックが複雑
  • 中規模から大規模のコードベースで沢山の人々に使われる

すべてアプリケーションはReduxを必要としません。アプリケーションを構築する前によく検討して、Reduxを使うかどうか決めましょう。

Reduxは小さなスタンドアローンのJSライブラリーです。でも、普通はいくつかの他のパッケージと一緒に使います。

React-redux

ReduxはUIフレームワークと一緒に使えます。よく利用される代表的なものはReactです。React-Reduxは公式パッケージです。Reactコンポーネントとstate を読み出したり更新したりするRedux Storeを組み合わせます。

Redux Toolit

Reduxロジックを書くための推奨アプローチです。Reduxアプリケーションを構築する基本となるパッケージと関数が含まれます。Reduxのタスクをシンプルに記述できて、よくあるミスを未然に防ぎます。

Redux DevTools Extension

Redux Storeのstateの状態を履歴として表示します。アプリケーションをデバッグするのに効果的です。

Reduxのコンセプト

アプリケーションはstateviewactionsからなりたっています。one-way data flowの例を示すと

  • Stateはアプリケーションのある時点の状態を記録しています。
  • UIstateに基づいて描画されます。
  • ボタンをクリックしたりしてなにかが起こるとstateがイベントに応じて更新されます。
  • UIが再描画されます。

複数のコンポーネントが同じstateを共有する必要があるとき、特にそれらのコンポーネントが異なる場所に配置されているとき、親コンポーネントにstateを移動させる必要がなくなります。
コンポーネントからstateを抜き出してコンポーネントツリーの外に配置します。コンポーネントツリーのどこにあろうともactionsによってstateにアクセスすることが出来ます。
viewsstateを独立して管理するルールを強制するコンセプトがコードをより構造的にメンテナンスしやすくさせます。

Immutability

Mutableは可変、immutableは決して変更されないことを意味します。
JavaScripのobjectsarraysは何もしなければすべてmutableです。immutablyに更新するためには、コードでobjects/arraysをコピーして、そのコピーを変更します。
手動でJavaScriptのarrya/objectをスプレッドオペレータを使う例を示します。

const obj = {
  a: {
    // To safely update obj.a.c, we have to copy each piece
    c: 3
  },
  b: 2
}

const obj2 = {
  // copy obj
  ...obj,
  // overwrite a
  a: {
    // copy obj.a
    ...obj.a,
    // overwrite c
    c: 42
  }
}

const arr = ['a', 'b']
// Create a new copy of arr, with "c" appended to the end
const arr2 = arr.concat('c')

// or, we can make a copy of the original array:
const arr3 = arr.slice()
// and mutate the copy:
arr3.push('c')

Reduxはすべてのstateの更新はimmutablyに行われる必要があります。

用語

先にすす前に、Reduxで用いられるいくつかの用語について説明します。

Actions

actionはプレーンなtypeフィールドがあるJavaScriptオブジェクトです。アプリケーションで何かのイベントが起こることにたいして端的に説明する文字列のことです。例えばtodos/todoAddedなら「Todoに追加すること」を表すなどです。たいてい文字列は"domain/eventName"のように記述します。最初の部分は仕様やカテゴリーで2つ目は「何が起こったか」を表します。

任意のActionオブジェクトは追加情報としてpayloadと呼ばれるフィールドに情報を追加することがあります。

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creators

action creatorは関数です。actionオブジェクトを返します。

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

Reducers

reducerは現在のstateactionオブジェクトを受け取って、必要に応じてstateを更新する方法を決定する関数です。

Store

storeと呼ばれるオブジェクトに現在のReduxアプリケーションの状態を保持されています。

Dispatch

Reduxはdispatchと呼ばれるメソッドを持っています。stateを更新する唯一の方法はactionオブジェクトを引数に渡してstore.dispatch()を呼ぶことです。

Selectors

selectorはstoreからstateの情報を抜き出す方法を知っている関数です。

目次に戻る

コメントを残す

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

先頭に戻る