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;