react 项目配置以及使用redux-saga

1.配置store下的index.js文件

import { createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法
import reducer from './reducer'    
import saga from 'redux-saga'
import mySagas from './sagas'

const sagaMiddleware = saga();

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(mySagas)

export default store   //暴露出去

2.组件中创建action

componentDidMount(){
         const action = getMyListAction()
        store.dispatch(action)
    }

3.actionCreators中写getMyListAction，getListAction 方法

export const getListAction =(data)=>({
    type:GET_LIST,
    data
})
export const getMyListAction =()=>({//返回还是对象 saga
    type:GET_MY_LIST
})

4.配置sagas.js文件

import { takeEvery, put } from 'redux-saga/effects'
import { GET_MY_LIST } from './actionTypes'
import { getListAction } from './actionCreators'
import axios from 'axios'

function* mySaga(){
    yield takeEvery(GET_MY_LIST,getList)
}

function* getList(){
     const res = yield axios.get('/api/getGoodsMenu')
     const action = getListAction(res.data.result)
     yield put(action)
}
export default mySaga;

5.reducer文件

case GET_LIST:
      newState.list=action.data;
      return newState；

6.actionTypes

export const GET_MY_LIST= 'getMyList'