redux-saga实现异步获取数据和删除数据

redux-saga

redux中间件

使用generator函数在sagas文件中处理业务逻辑，有了redux-saga之后，除了reducer可以接收action，sagas也可以接收并做业务逻辑处理

在redux-thunk这篇文章的基础上进行配置修改。

获取数据

• 第一步

安装：yarn add redux-saga

• 第二步
  使用中间件，在store的入口文件index.js中配置如下：

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducers';
+ import createSagaMiddleware from 'redux-saga';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
+ const sagaMiddleware = createSagaMiddleware();
+ const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
let store = createStore(reducer, enhancer);
export default store;

• 第三步
  创建sagas.js配置文件并引入到store中
  redux-saga把业务逻辑单独写一个文件

//sagas.js
function* mySaga() {}
export default mySaga;

然后在store的入口文件index.js中执行run方法，运行saga：

import mySagas from './sagas';
sagaMiddleware.run(mySagas);

注意运行的时机是在store创建好了之后，将中间件挂上去之后。

• 第四步
  组件挂载完毕之后，声明actionCreators，声明actionType
  在Article.js文件中设置如下代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeMsg, getDataAxAction, getDataSaAction, deleteDataSaAction } from '../store/actionCreator/articleAction';

class Article extends Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props)}
                <button onClick={this.props.changeMsg}>修改msg</button>
                <button onClick={this.props.getData}>获取异步数据</button>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return state;
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        changeMsg: () => {
            dispatch(changeMsg('111'))
        },
        getData: () => {
            /* dispatch(getDataAxAction({
                page: 0, pageSize: 10
            })); */
           + dispatch(getDataSaAction({
           +     page: 0, pageSize: 10
           + }));
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Article);

• 第五步
  在articleAction.js中配置getDataSaAction，代码如下：

import { CHANGE_MSG, CHANGE_ARTICLES, GET_MY_LIST } from '../actionTypes';
import axios from 'axios';
export const changeMsg = (value) => {
    return {
        type: CHANGE_MSG,
        value
    }
}
/* export const getDataAxAction = (value) => {
    return (dispatch) => {
        axios.get('http://134.175.154.93/manager/article/findArticle', { params: value }).then((res) => {
            dispatch(changeArticles(res.data.data.list))
        }).catch((err) => {
            console.log(err)
        })
    }
}*/
export const changeArticles = (value) => {
    return {
        type: CHANGE_ARTICLES,
        value
    }
}

export const getDataSaAction = (value) => {
    return {
        type: GET_MY_LIST,
        value
    }
}

在actionTypes.js中添加语句：

export const GET_MY_LIST = 'GET_MY_LIST';

• 第六步
  在组件中分发action,在sagas.js中处理业务逻辑。在sagas.js中处理业务逻辑，分发action。

import { takeEvery, put } from 'redux-saga/effects';
import axios from 'axios';
import { GET_MY_LIST, DELETE_MY_LIST } from '../store/actionTypes';
import { changeArticles, getDataSaAction } from '../store/actionCreator/articleAction';
function* mySaga() {
    yield takeEvery(GET_MY_LIST, getList);
}
function* getList(action) {
    let res = yield axios.get('http://134.175.154.93/manager/article/findArticle', { params: action.value });
    yield put(changeArticles(res.data.data.list));
}
export default mySaga;

删除数据

• 第一步
  Article.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeMsg, getDataAxAction, getDataSaAction, deleteDataSaAction } from '../store/actionCreator/articleAction';

class Article extends Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props)}
                <button onClick={this.props.changeMsg}>修改msg</button>
                <button onClick={this.props.getData}>获取异步数据</button>
                <button onClick={this.props.deleteDataById}>删除异步数据</button>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return state;
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        changeMsg: () => {
            dispatch(changeMsg('111'))
        },
        getData: () => {
            /* dispatch(getDataAxAction({
                page: 0, pageSize: 10
            })); */
            dispatch(getDataSaAction({
                page: 0, pageSize: 10
            }));
        },
        deleteDataById: () => {
            dispatch(deleteDataSaAction({ id: 4114 }))
        }

    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Article);

• 第二步
  articleAction.js

import { CHANGE_MSG, CHANGE_ARTICLES, GET_MY_LIST, DELETE_MY_LIST } from '../actionTypes';
import axios from 'axios';
export const changeMsg = (value) => {
    return {
        type: CHANGE_MSG,
        value
    }
}
/* export const getDataAxAction = (value) => {
    return (dispatch) => {
        axios.get('http://134.175.154.93:8099/manager/article/findArticle', { params: value }).then((res) => {
            dispatch(changeArticles(res.data.data.list))
        }).catch((err) => {
            console.log(err)
        })
    }
}*/
export const changeArticles = (value) => {
    return {
        type: CHANGE_ARTICLES,
        value
    }
}

export const getDataSaAction = (value) => {
    return {
        type: GET_MY_LIST,
        value
    }
}
export const deleteDataSaAction = (value) => {
    return {
        type: DELETE_MY_LIST,
        value
    }
}

actionTypes.js中添加语句：

export const DELETE_MY_LIST = 'DELETE_MY_LIST';

• 第三步
  sagas.js

import { takeEvery, put } from 'redux-saga/effects';
import axios from 'axios';
import { GET_MY_LIST, DELETE_MY_LIST } from '../store/actionTypes';
import { changeArticles, getDataSaAction } from '../store/actionCreator/articleAction';
function* mySaga() {
    yield takeEvery(GET_MY_LIST, getList);
    yield takeEvery(DELETE_MY_LIST, deleteList);
}
function* getList(action) {
    let res = yield axios.get('http://134.175.154.93/manager/article/findArticle', { params: action.value });
    yield put(changeArticles(res.data.data.list));
}
function* deleteList(action) {
    let res = yield axios.get('http://134.175.154.93/manager/article/deleteArticleById', { params: action.value })
    yield put(getDataSaAction({
        page: 0, pageSize: 10
    }))
}
export default mySaga;