redux-thunk 简介
Redux处理异步任务——异步数据流中间件：redux-thunk & action是一个函数，函数内部处理异步任务
注意：默认情况下，redux自身只会处理同步数据流。
但是，如果涉及到异步操作，就应该使用 redux-thunk 这种的中间件，来处理异步数据流！！！
使用了redux-thunk中间件以后，我们需要修改action
redux-thunk的使用
安装 ，引入
npm install redux-thunk
// 下载两个中间件, redux-thunk 处理异步,redux-logger 日志模块
// npm i redux-thunk redux-logger
导入
代码语言：javascript复制import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { Provider } from 'react-redux'
import userReducer from "./redux/userReducer";配置：
代码语言：javascript复制const loggerMiddleware = createLogger()
const store = createStore(userReducer,applyMiddleware(
thunkMiddleware, // 使得action(或dispatch)可以是一个函数
loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
));组件中使用:
和redux 的区别，注意是dispatch中的action是一个函数
代码语言：javascript复制import {connect} from 'react-redux'
import {userLoginAction} from "./../redux/actionCreatorThunk"
function Login(){
...
}
function mapStateToProps(state) {
return {
user:state.user
}
}
function mapDispatchToProps(dispatch) {
return {
userLogin:(userInput) => dispatch(userLoginAction(userInput))
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Login);组件中使用action
代码语言：javascript复制const onFinish = (values) => {
//console.log('Success:', values);
// user,pwd,发送到服务器，进行验证
//aciton 中去进行数据的请求
this.props.userLogin(values).then((data)=>{
console.log("登录成功");
this.props.history.push('/index');
}).catch((data)=>{
console.log(data);
})
};ActionCreatorThunk
有了redux-thunk以后，处理异步数据的action :
异步操作完成后，都要触发一个同步的action，由这个同步的action来完成该任务!!!
thunk的action写法
代码语言：javascript复制// 创建action所需要数据
export function userLoginAction(userInput) {
//可以在这里进行异步处理
return (dispatch)=>{
// 在此处，就可以处理异步操作了
// 也就是，异步代码就可以放在此处执行了
return new Promise((resolve, reject)=> {
Axios.post(Api.user.UserLogin, userInput).then((res) => {
if (res.data.returnCode === 200) {
const action = {
type: actionType.USER_LOGIN,
data: {
user: res.data.data,
token: res.data.token
}
}
dispatch(action)
resolve(res.data);
} else {
reject("请求失败");
}
})
});
}
}
