React-Reduxメモ

アクションの追加

定数でActionの種類を定義する。
ReducerはActionの種類を見てどのような状態を返すのかを決定する

ActionはActionCreater経由で発行する。
connectを用いると自動的に適切なReducerにActionが渡される。

//sample_action.js
//Actionの定義
export const ACTION_TYPE_A = ‘ACTION_TYPE_A’
export const ACTION_TYPE_B = ‘ACTION_TYPE_B’
//ActionCreater
export function aAction() {
    return {
        type: ACTION_TYPE_A,
    //その他渡すデータなど
    };
}
export function bAction() {
    return {
        type: ACTION_TYPE_B,
    //その他渡すデータなど
    };
}

Reducer

発行されたActionを受け取り状態を返す。
新しい状態を返さないと再レンダリングされないので注意。

//sample_reducer.js
import { combineReducers } from ‘redux’;
import { ACTION_TYPE_A,ACTION_TYPE_B } from ‘./sample_action’;
function sampleReducer(state, action) {
    if (typeof state === ‘undefined’) {
        return Object.assign({}, state, {
            myState:NULL
        });
    }
    switch (action.type) {
        case ACTION_TYPE_A :
        return Object.assign({}, state, {
            myState:"ActionA"
        });
        case ACTION_TYPE_B :
        return Object.assign({}, state, {
            myState:"ActionB"
        });
        default:
        return state;
    }
}
export default sampleReducer;

複数のReducerをまとめる（今は1個）

//reducers.js
import {combineReducers} from ‘redux’;
import sampleReducer from ‘./sample_reducer’
const rootReducer = combineReducers({sampleReducer});
export default rootReducer;

最上位のコンポーネントを作る

Reducxにおいてストアはただ１つだけ。

//index.ios.js
import rootReducer from ‘./reducers’
const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
    );
class INDEX extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <Provider store={store}>
            <App/>
            </Provider>
            );
        }
    }

作成したActionをマッピング

これでActionを発行したら自動的にReducerへ渡されるようになる

//app.js
import * as SampleAction from ‘./sample_action’;
function mapDispatchToProps(dispatch) {
    return {
        …bindActionCreators(SampleAction, dispatch),
        pushState
    };
}

Reducerから受け取るStateをPropsにマッピング

新しいStateを受け取ると該当のPropsを用いているコンポーネントを再レンダリングしてくれる。

//app.js
function mapStateToProps(state) {
    return {
        sample: state.sampleReducer,
    };
}
//ReduxのstoreにReactのコンポーネントをバインドする
//https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
export default connect(mapStateToProps,mapDispatchToProps)(App)