这里我们默认你是会 react-redux 的，并且我们只讨论最简单的 怎么用异步action
- 首先我们需要安装
redux-thunk
npm i redux-thunk -S - 在打包js的入口文件例如
main.js中加入
import thunkMiddleware from 'redux-thunk'; - 在创建 store 时，使用以下代码
const store = createStore(rootReducer,
applyMiddleware(thunkMiddleware));
- 在
mapDisPatchToProps函数中，dispatch()函数发送的不再是一个action对象，而是一个function()函数，例如：
const mapDispatchToProps = (dispatch) => {
return {
onCheckLogin: (mobilePhone, password, capture) => {
dispatch(isCorrect(mobilePhone, password, capture));
}
}
};
- 然后
action中，首先调用mapDisPatchToProps中的函数，例如在上例中就是isCorrect函数，然后在这个函数中发送异步请求，请求完成回来之后，会再发送一次dispatch(function()),在这个function()中，会发送一个action对象,然后到reducer里面,reducer中会根据** action.type ** 来做相应的数据处理，并更新 state
** action.js **
'use strict';
export const isCorrect = (mobilePhone, password, capture) = {
return (dispatch) => {
dispatch(checkInfor(mobilePhone, password, capture));
}
};
export const checkInfor = (mobilePhone, password, capture) => {
if (mobilePhone === 'admin@admin.com' && password === '12345678' && capture === '1234') {
return {
type: 'LOGIN',
}
} else {
return {
type: 'ERROR',
}
}
};
** reducer.js **
function reducer(state = {
status: false
}, action) {
switch (action.type) {
case 'LOGIN':
{
return {
status: !state.status
}
}
case 'ERROR':
{
alert('请重新输入');
return {
status: state.status
}
}
}
return state;
}
export default reducer;
因为我们现在只是给老师一个帐号和密码看能不能跳转到另一个页面，所以我们还没有在 isCorrect 函数中发送异步请求，大概的过程就是这样。
7 .概念关系图如下：
概念关系图
8 .比 middleware好的地方，就是可以少些很多代码，具体少写了那些代码，请自己体会
9 . github地址：https://github.com/RangelZZZ/teacher-system
