redux中间件来执行异步操作

　　在redux中我们都是执行同步操作，如果我们想要执行异步操作，那么我们就需要依赖到中间件，具体的中间件的概念我就不描述了相信官方文档更详尽。现在就描述下具体的用法，就已我们项目中用到的最多的数据请求为例来进行描述。

　　redux如果需要使用异步操作，那么就需要使用中间件，而redux自带着一些中间件的用法，在store中可以在createStore中传入我们的中间件，但在之前需要先引入对应插件applyMiddleware，以及下载执行异步操作的redux-thunk。

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';const store = createStore(
    reducer,
　　applyMiddleware(thunk)

) export default store;

在上面的代码中就是引入中间件的方式，但是现在我们就不能使用REDUX_DEVTOOLS浏览器插件在浏览器查看redux的状态变化，我么可以对他进行改造，参考https://github.com/zalmoxisus/redux-devtools-extension，其中就是REDUX_DEVTOOLS也是中间件的形式，通过了解后我们在对代码进行改造；

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);
const store = createStore(
    reducer,
    enhancer
)
export default store;

现在我们就能即使用thunk中间件来发异步请求，也能同时在浏览器中查看插件来观察redux状态变化。

***现在来说下redux-thunk他是怎么发挥它的作用，达到异步操作的(其实通过画图很好理解，我们学习react或者是redux一定要对他的执行逻辑清除)。

我们的action都是通过返回一个对象，接着执行对应的操作，但是我们添加了redux-thunk中间件后，action也可以返回一个函数，我们的异步操作就在这里面来执行。

export const init_list_action =() => {
    return (dispatch) => {
        axios.get(' http://www.mocky.io/v2/5cd3950535000070007a4f81').then(res => {
            dispatch(init_list(res.data))
            dispatch(census_check_num())
        })
    }
}

返回一个函数，在函数中发起请求异步操作，之后的store调用发起这个action时就会执行里面的函数，发起请求得到对应数据，得到数据后我们就还需要再次发起action来将数据添加到state中，这样我们的这个异步操作就完成了！现在贴上涉及到操作的代码：

import { connect } from 'react-redux';
import List from '../component/List';
import { delete_todo_item, check_box_handler, census_check_num, init_list_action } from '../store/actionCreator';
import React,{ Component } from 'react';

class ListItem extends Component {
    render() {
        return (
            <List data={this.props}></List>
        )
    }
    componentDidMount() {
        this.props.initList()
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        list: state.list
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        checkboxHandler: (index) => {
            dispatch(check_box_handler(index));
            dispatch(census_check_num());
        },
        deleteTodoItem: (index) => {
            dispatch(delete_todo_item(index));
            dispatch(census_check_num());
        },
        initList: () => {
            dispatch(init_list_action())
        }
    }
}

const listItem = connect(
    mapStateToProps,
    mapDispatchToProps
)(ListItem)
export default listItem;

上面的是一个list的组件，通过react-redux对其进行了操作，在组建的componentDidMount周期调用初始化列表！

这里插一句，为了完成异步操作，我这里使用了Mocky来实现接口，https://www.mocky.io/；

最后得到的页面为：

其他的所有起步操作请求都和这个大同小异，redux存在很多中间件，可以自行去研究！该demo里面我直接使用了react-redux来配合redux！不懂react-redux的可以先不管，该方法在redux同样适用！

redux中间件来执行异步操作

猜你喜欢