react（17.x）-redux中间件----thunk、saga的简单使用

这里的中间件指的是action和store之间

---

redux-thunk

---

redux-thunk这个中间件就是对dispatch方法的一个升级，如果dispatch中传递的是一个对象，会直接传递给store；如果是一个方法，会先执行这个方法

1、使用之前先安装一下：npm install redux-thunk

2、配置一下redux-thunk
redux-thunk和redux-devtools一样都是一个中间件，需要在store中配置，可以查阅github：
https://github.com/zalmoxisus/redux-devtools-extension
https://github.com/reduxjs/redux-thunk

当使用了redux-thunk后还要使用redux扩展工具，这里的配置就不能像之前那样配置了，按照github中的步骤即可

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import Reducer from './reducer'

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
)
// window下有这个变量则执行调试工具
const Store = createStore(
  Reducer,
  enhancer
)
export default Store

没有使用redux-thunk之前action只能返回一个对象，现在可以用thunk返回一个函数了

actionCreators.js

export const initListAction = (arr) => ({
    type: initList,
    arr
})

export const getInitListAction = (arr) => ({
    type: getInitList,
    arr
})

//使用redux-thunk后可以返回一个函数
export const getServeData = () => {
    return (dispatch) => {
        axios.post('https://XXXXXXXXXXXXX/test/charging/products/list').then(res => {
           const data = []
           res.data.data.records.map(item => {
               console.log(item)
               data.push(item.productTitle)
           })
           dispatch(initListAction(data))
        }).catch(err => {

        })
    }
}

使用是时候在页面引入，调用即可

import {  getServeData, getInitListAction } from '../store/actionCreators'

componentDidMount(){
	Store.dispatch(getServeData())
}

---

redux-saga

---

redux-saga和saga不同，他是把异步的操作单独的放在一个文件中进行管理

github地址：https://github.com/redux-saga/redux-saga

安装：npm install redux-saga

新建saga.js

import {
    call,
    put,
    takeEvery,
    takeLatest
} from 'redux-saga/effects'
import {
    getInitList
} from './actionTypes'
import axios from 'axios'
import {
    initListAction
} from './actionCreators'

function* getInitData() {
    try {
        // 等到axios请求完成后将结果存到result中
        const result = yield axios.post('https://proxy01.hnchengyue.com/test/charging/products/list')
        console.log(result)
        const data = []
        result.data.data.records.map(item => {
            data.push(item.productTitle)
        })
        const action = initListAction(data)
        // 等到action执行完后再执行put
        yield put(action)
    } catch (error) {
        console.log(error)
    }
    
}

function* mySaga() {
    //只要接收到getInitList这个类型，执行getInitList方法
    yield takeLatest(getInitList, getInitData);

}

export default mySaga

这里注意不能像以前axios请求那样子写了，需要用yield，当请求错误的时候统一在catch里面处理

最后在todolist的componentDidMount中dispatch一个getInitListAction即可

配置saga
使用redux-saga这个中间件也要在store中进行配置

import { createStore, applyMiddleware, compose } from 'redux'
// import thunk from 'redux-thunk'
import Reducer from './reducer'
import saga from './saga'
import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware()
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware),
)

// window下有这个变量则执行调试工具
const Store = createStore(
  Reducer,
  enhancer
)
//一定要放在createStore后面，不然会报错
sagaMiddleware.run(saga)

export default Store

使用
只需要在componentDidMount中引入getInitListAction并派发

import { getServeData, getInitListAction } from '../store/actionCreators'

componentDidMount(){
        // const action = getServeData()
        Store.dispatch(getInitListAction())
        //store发生变化就更新
        Store.subscribe(this.handleStoreChange)
}