Redux

「.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とディレクトリが分けられることが多い。

↑