.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

Fluxアーキテクチャに基づいて設計されたJavaScriptフレームワーク

特徴

  • 上記のFluxの影響を受けていることから、データの流れは一方向になる。
  • Actions -> Reducers -> Storeの3つの部分から構成される。
  • Storeが状態を持ち、Actionが発生した際に、Reducerを使ってStoreの状態を更新する。
  • Viewに関しては、Storeの用意するAPIを使うことで、状態の購読、更新・取得ができる。

三原則

Single source of truth

状態は一つのStoreのobjectツリーに格納される。

State is read-only

Actionを発火することが、状態を更新する唯一の方法。

Changes are made with pure functions

状態がActionによってどのように変更されるか、
定義するために純粋な(副作用のない)Reducerを書く。

ドメイン

Actions

  • View等から発火されて作られるオブジェクト
  • 実体
    {
        type: "アクションの種類を一意に識別できる文字列またはシンボル",
        payload: "アクションの実行に必要な任意のデータ",
    }
  • 定義(actions.js
    export const ACTION_TYPE = 'アクションの種類を一意に識別できる文字列またはシンボル';
    export const ActionType = hoge_value => ({type: ACTION_TYPE , payload: hoge_value });
  • Viewのconnect関数のmapDispatchToProps?引数(デリゲート)で定義・生成される。

Reducers

  • FluxのDispatcherの代替。
  • 関数型プログラミングにおいて畳み込み演算を意味する副作用のない関数。
    • 初期状態はデフォルト引数で定義される。
    • 状態を変更するには、新しいものを合成するように書く。
  • 定義(reducer.js
    • import { ACTION_TYPE } from './actions';
      
      export default (state = {value: 0}, action) => {
          switch (action.type) {
              case ACTION_TYPE:
                  return { ...state, value: state.value + action.payload };
              default:
                  return state;
          }
      }
  • 大規模な開発においてReducerを細かく分割する場合は、
    combineReducersという関数を用いて書く。
    import { combineReducers } from 'redux';
    
    const XXXXReducer = (state = {...json...}, payload) => {
        /* 省略 */
    };
    const YYYYReducer = (state = {...json...}, payload) => {
        /* 省略 */
    };
    const ZZZZReducer = (state = [...json...], payload) => {
        /* 省略 */
    };
    export default combineReducers({
        XXXX: XXXXReducer,
        YYYY: YYYYReducer,
        ZZZZ: ZZZZReducer,
    })

Store

  • シングルトンで、インスタンスの管理不要。
  • 状態(state)を格納する。
  • アプリケーションに必ず1つしか設けらない。
  • 1つのStoreですべての状態を管理する。
  • イメージとしては「でっかいJSONの塊」。

View

  • Reduxに参加するためにはReactRedux?によって提供されるconnect関数を用いる。
    • react-reduxをインストールして、
      npm install react-redux --save
    • react-reduxをインポートする。
      import { connect } from 'react-redux';
  • 変更は、propsを通じて渡されてくるので、
    connect(mapStateToProps, mapDispatchToProps)(Component)
  • connect関数のmapStateToProps?引数(デリゲート)は、stateとpropsのバインディングを定義する。
    • 以下のように書いても動作するが、
      state => state
    • 以下のように必要なものだけを選別してpropsにバインドする。
      state => ({ value: state.value })
  • connect関数のmapDispatchToProps?引数(デリゲート)は、
    • dispatchで、Reducerに向けた通知を定義する。
      { ActionType }
    • Actionsの定義は、以下のようにインポートする。
      import { ActionType } from './actions';
  • Container
    • 以下のようなケースでは、Containerが集約してconnect関数でバインドする。
      (<UsersList>
          <User />
          <User />
          <User />
          <User />
      </UsersList>)
    • 可読性を高めるため、Componentとディレクトリが分けられることが多い。

Fluxとの違い

概要

Fluxの場合

Reactコンポーネント自身が個別に状態管理をする。

Reduxの場合

  • 状態管理する専用の場所(Store)で状態管理する。
  • Reactコンポーネントはそれを映すだけに徹する。
  • コードの削減と関数の再利用性の向上
    • Dispatcherがない
    • Storeがシングルトンでインスタンス管理が不要。

参考

Saga

概要

  • Reduxは、最小限で、フルスタックとは言えない薄さ。
    (なので、機能を補う幾つかのサブ・プロジェクトがある)
  • 副作用を生む処理の設計の指針について、
    模索が必要で、その筆頭が 非同期処理の扱いになる。
    • 処理をどこに書くのか、
    • どのように書くのか、
    • どこから呼び出すべきか、
  • 解決方法としてredux-sagaがある。

詳細

・・・

参考

redux-saga

その他

  • redux
    • redux-thunk
    • redux-promise
  • react-side-effect

関数型言語の副作用

概要

  • 「戻り値の値」を変えることを「作用」
  • 「戻り値以外の値」を変えることを「副作用」

参考

参考

Qiita

POSTD

terrierscript – Medium

Reactのセカンド・ステップ

マイクロソフト系技術情報 Wiki


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-09-27 (木) 17:12:16 (46d)