|
redux-thunk Redux处理异步任务——异步数据流中间件： redux-thunk & action是一个函数，函数内部处理异步任务
使用了redux-thunk中间件以后，我们需要修改action redux-thunk的使用 安装 ，引入 npm install redux-thunk // 下载两个中间件, redux-thunk 处理异步,redux-logger 日志模块 // npm i redux-thunk redux-logger 导入 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";
配置： const loggerMiddleware = createLogger()
const store = createStore(userReducer,applyMiddleware(
thunkMiddleware, // 使得action(或dispatch)可以是一个函数
loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
));
组件中使用:和redux 的区别，注意是dspatch中的action是一个函数 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 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写法 // 创建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("请求失败");
}
})
});
}
}
|
|
|
公众号
