reduxまとめ

redux
redux概念
ReduxはJavaScriptアプリケーションの予測可能な状態容器です.
redux設計思想

Webアプリケーションは、ステートマシンであり、ビューと状態は一対一である.

のすべての状態は、オブジェクトの中に保存されます.

基本概念とAPI
store
Storeはデータを保存するところです.容器として見ることができます.アプリケーション全体は一つのStoreしかありません.
ReduxはcreateStoreという関数を提供します.
state
Storeオブジェクトにはすべてのデータが含まれます.ある時点のデータがほしいなら、Storeに対してスナップショットを生成します.この時点のデータセットをStateといいます.
現在時刻のStateは、store.get Stateで入手できます.
Reduxでは、一つのStateは一つのViewに対応すると規定しています.
アクション
Stateの変化は、Viewの変化を招きます.しかし、ユーザーはStateに接触できず、Viewに触れるしかない.だから、Stateの変化はViewによるものでなければならない.アクションはViewから通知されたもので、Stateは変化するはずです.アクションは対象です.このうちtype属性は必須で、アクションの名前を表します.このように理解されてもよく、アクションは現在起こっていることを説明する.スタントを変える唯一の方法は、アクションを使うことです.それはデータをStoreに送ります.
store.dispatchはViewからアクションを出す唯一の方法です.
Reducer
Storeはアクションを受け取った後、新しいStateを与えなければならないので、Viewは変化します.このStateの計算過程をReducerといいます.Reducerは、Actionと現在のStateをパラメータとして受け入れ、新しいStateを返す関数です.
Reduxのワークフロー
ユーザーはactionを送信し、storeはreducerを自動的に呼び出し、現在のstateとactionを受信し、reducerは新しいstateに戻り、stateが変更されると、storeはモニタ関数subscribeを呼び出し、listenerはstore.getState()を通じて現在の状態を取得し、stateが変更され、Viewを再レンダリングすることができます.
以上の内容は阮一峰先生のブログから来ました.
非同期操作(redux-saga)
認証コードの取得例:
//component/verifyCode

     

handClick(){
    const {dispatch} = this.props;
    //       action
    dispathc(userAction.verifyCode({
       mobile:mobile
    }));
}

//actions/userActions

    //    
    const VERIFYCODE = 'VERIFYCODE';
    //      
    const VERIFYCODE_SUCCESS = 'VERIFYCODE_SUCCESS';
    //      
    const VERIFYCODE_FAIL = 'VERIFYCODE_FAIL';

    //actionCreate
    //payload     
    export const verifyCode = (payload) => ({type:VERIFYCODE,payload});
    export const verifyCode_Success = (data) => ({type:VERIFYCODE_SUCCESS,data});
    export const verifyCode_Fail = (error) => ({type:VERIFYCODE_FAIL,error});

/reducers/userReducers

    function getVerifyCode(state={isFetching:false,data:null},action){
        //  action type   state
        switch(action.type){
            case 'VERIFYCODE':
                return {
                    ...state,
                    isFetching:true
                }
            case 'VERIFYCODE_SUCCESS':
                return {
                    ...state,
                    isFetching:false,
                    data:action.data
                }
            case 'VERIFYCODE_FAIL':
                return {
                    ...state,
                    isFetching:false,
                    error:action.error
                }
            default:
                return state;
        }
    }

    export const rootReducer = combineReducers({
        getVerifyCode
    })

//sagas/usersaga

function* getVerifyCode(action){
    //      
    const data = yield call(service.getVerifyCode,action.payload);
    if(data.status===0){
        //      ，    action
        yield put(userActions.verifyCode_Success(data.content));
    }else{
        //      ，    action
        yield put(userActions.verifyCode_Fail('    '));
    }
}

export function* watch(){
    //  action type VERIFYCODE ,    getVerifyCode
    yield takeEvery('VERIFYCODE', getVerifyCode),
}

/store/index

import {
    createStore,
    applyMiddleware
} from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';

export default function configureStore() {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
    store.runSaga = sagaMiddleware.run;
    return store;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Provider,
} from 'react-redux';
import rootSaga from './js/sagas';
import configureStore from './js/store';

import App from './js/containers/App';


const store = configureStore();
store.runSaga(rootSaga);


const render = (Component) => {
    ReactDOM.render(
        
            
        ,
        document.getElementById('root')
    );
};

render(App);

redux-sagaドキュメント