![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
アプリケーション全体の「状態（State）」を1つの大きなツリー（Store）で管理（Single Source of Truth）。
状態は直接変更できず「Reducer」という純粋関数を通じてのみ状態を更新。
開発を強力にサポートするブラウザ拡張機能がある（Redux DevTools?）。
「Reducer」は、外部に依存しない純粋関数として記述。
学習コストが比較的高く、記述量が増えるため、小規模開発ではオーバー・エンジニアリング。
状態遷移が明確でバグが減るが、記述量（ボイラープレート）が増える。
タイムトラベル機能で追跡が容易だが、学習コストが比較的高い。
大規模でも秩序を保てるが、小規模ではオーバー・エンジニアリング
状態は一つのStoreのobjectツリーに格納される。
Actionを発火することが、状態を更新する唯一の方法。
状態がActionによってどのように変更されるか、
定義するために純粋な（副作用のない）Reducerを書く。
{
type: "アクションの種類を一意に識別できる文字列またはシンボル",
payload: "アクションの実行に必要な任意のデータ",
}export const ACTION_TYPE = 'アクションの種類を一意に識別できる文字列またはシンボル';
export const ActionType = hoge_value => ({type: ACTION_TYPE , payload: hoge_value });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;
}
}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,
})npm install react-redux --save
import { connect } from 'react-redux';connect(mapStateToProps, mapDispatchToProps)(Component)
state => state
state => ({ value: state.value }){ ActionType }import { ActionType } from './actions';(<UsersList>
<User />
<User />
<User />
<User />
</UsersList>)Reactコンポーネント自身が個別に状態管理をする。
・・・
以下のようなツールが存在しているらしい。
