react+redux通过redux-thunk处理异步action

本文章的基础项目代码来自
分解优化react对redux的基础使用
如果您没有看过 希望跟着把对应案例先写出来 方便后续进行

在这里 我们需要弄清一个概念 action是什么？

在js脚本中 action最基本的概念就是一个对象 而他除了对象 还有另一种概念 就是函数
这也是在redux区分他们的形式 对象的 就是同步action 函数的 则是 异步action

我们来解析一下这个涨价十个点的方法

点击时 调用了组件中的 onPriceRise方法 onPriceRise方法中则调用了PriceRise 将 PriceRise的返回值 拿去通话了redux
那么 我们就要看PriceRise到底返回了什么 他在src下的 action 下的index.js下

很明显 这里 我们给的是一个对象类型的返回值 那么这就是一个同步的action

那么 我们现在来尝试写一个异步的action

我们先在项目终端引入依赖

npm i redux-thunk

thunk能让store接受函数体的action 如果不通过redux-thunk中间件去处理 你直接传函数 redux会报错 因为他只接收标准对象类型的参数

但加入了redux-thunk后 他就会理解为 我也不管你这函数是干嘛的 反正我帮你执行完

引入完之后 我们对 src下 store 下的index.js做一下改造

import { createStore,applyMiddleware } from "redux"
import reducer from "../reducers/counter"
import thunk from "redux-thunk"

// 创建store仓库
const store = createStore(reducer,applyMiddleware(thunk));

export default store

这里 我们主要就是引入了redux-thunk 通过redux的applyMiddleware传入了redux-thunk

然后 我们 改一下src下 action下index.js的onPriceRise函数

export function PriceRise(value,resolve) {
    return (dispatch) => {
        setTimeout(
            ()=>{
                dispatch({
                    type: "PriceRise",
                    value: value
                });
                resolve();
            },500
        )
    }
}

这里 我们设置了一个定时任务setTimeout来模仿异步操作 然后 我们的两个参数 一个是值 另一个 则是resolve成功后的回调

确实 异步action 就是告诉redux 我这个操作是异步你 你帮我执行一下 然后 你这个执行后 返回的这个函数 redux知道 你还是要用同步action来修改数据 于是 他也返回了一个dispatch 方便你直接在用对象的同步dispatch去修改数据

这里 就好比 你要调个接口 redux也知道 你调完接口 还是要通过对象给里面的东西赋值的

然后 最后 改一下components下的taximeter.jsx组件的onPriceRise方法

onPriceRise = () =>{
 store.dispatch(PriceRise(10,()=>{
    this.setState({})
  }))
}

这里 我们创立一个 前面的10 就是值 然后后面的第二个参数 是一个箭头函数 是等所有东西都执行成功之后 的回调 加完了 刷一下界面

我们打开界面 点一下 涨价十个点

可以明显感觉到 点一下 停了500毫秒左右 然后又走起来了

这个 确实我觉得不是一个必要的技术 写起来看着是方便一些 但确实很多人懒得去写 直接在组件里写接口 然后回调里再去用同步action更改数据反而更简便一些 所以开发场景 这个其实不是很实用