redux-sage 的使用

import {createStore, applyMiddleware, compose } from 'redux'
import todoApp from './reducer/index'
import thunk from 'redux-thunk'
import createSagaMiddleware from 'redux-saga'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware()

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...[thunk, sagaMiddleware]),
);
const store = createStore(todoApp, enhancer);

sagaMiddleware.run(mySaga)




export default store
    componentDidMount () {
        // axios.post('/queryBannerList', {
        //     type: 1
        // }).then(res => {
        //     let list = res.data.result.list
        //     store.dispatch(initList(list))
        // })
        const action = getTodoList()
        store.dispatch(action)
    }
//actions
export const initList = lists => {
    return {
        type: 'INIT_LIST',
        lists
    }
}

// export const getTodoList = () => {
//     return (dispatch) => {
//         axios.post('/queryBannerList', {
//             type: 1
//         }).then(res => {
//             let list = res.data.result.list
//             dispatch(initList(list))
//         })
//     }
// }

export const getTodoList = () => {
    return {
        type: 'GET_TODOLIST'
    }
}

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import axios from 'axios'
import { initList } from '../actions'
function* getTodoList () {
    const res = yield axios.post('/queryBannerList',{type: 1})
    const action = initList(res.data.result.list);
    yield put(action);
}
function* mySaga() {
    yield takeEvery("GET_TODOLIST", getTodoList);
}

export default mySaga

 

你可能感兴趣的:(react-js)