![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
Fluxアーキテクチャに基づいて設計されたJavaScriptフレームワーク
状態は一つの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>)下記の「Example: Todo List - Redux」を参考にした。
createStoreする。
Reactコンポーネント自身が個別に状態管理をする。
・・・
