doubleyong
管理员
管理员
  • 最后登录2022-07-05
  • 发帖数1075
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:622回复:0

[react]redux-thunk 中间件的示例

楼主#
更多 发布于:2022-03-03 16:49


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


导入
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("请求失败");
                }
            })
        });
    }
}

知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号