redux-saga学習(三)


redux-saga

  • インストールredux-saga(githupアドレス:リンクの説明参照)
  • yarn add redux-saga
  • redux-saga単純使用
  • import { createStore ,applyMiddleware ,compose } from 'redux';
    import createSagaMiddleware from 'redux-saga';
    import mySaga from './sagas';
    // import thunk from 'redux-thunk';
    import  reducer  from './reducer';
    const sagaMiddleware = createSagaMiddleware()
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose;
    const enhancer = composeEnhancers(
        applyMiddleware(sagaMiddleware)
      );
    
    const store = createStore(
        reducer,
        enhancer
    );
    sagaMiddleware.run(mySaga);
    export default store;
  • はsagasを作成する.js、対応するリクエストをsagasに統一する.jsは
  • を管理する
    import {  put, takeEvery } from 'redux-saga/effects';
    import { GET_LIST_DATA } from './actionTypes';
    import { initList } from './actionCreators';
    import axios from 'axios';
    function* fetchUser(action) {
        try {
            let  resData =  yield  axios.get('/list.json');
           
            const data = resData.data.list;
            console.log(data);
            yield put(initList(data))
        } catch (e) {
           console.log("      ")
        }
     }
    function* mySaga() {
    yield takeEvery(GET_LIST_DATA, fetchUser);
      }
      
    export default mySaga;