在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同样适用!