zoukankan      html  css  js  c++  java
  • Redux:异步操作

    最近状态不太好,学习redux的异步操作花的时间比想象的多,这里尽量清晰简要的表述一下在redux中怎么实现异步操作。

    先回顾一下同步操作:

    我们用redux执行同步的时候,都是先发起一个dispatch(actionCreator()

        1.先在actionCreator()中生成一个action对象。

        2.由dispatch方法将action传到reducer。

        3.reducer中计算新state

        4.新state保存到store中

        5.因为容器组件将state作为props传给展示组件,state更新后,展示组件渲染更新的部分(因为props更新了)

    如何实现异步操作:

        当我们发起一个异步任务时,我们会注意两个时间点:

        1.发起异步任务的时刻(pending)

        2.异步任务执行完的时刻(success || failure)

        !!在我们发起异步操作,即pending的时候,我们往往要在页面上作出提示,告诉用户“资源正在加载,请等候”。

        !!在异步操作完成后,我们也往往要将返回的data在页面上渲染,可能数据已经成功获取,也可能获取失败。

    所以,在执行异步操作的时候。一个基本的思路是:

        1.开始执行异步操作的时候,发出一个action,在页面上提示“资源正在加载”

        2.等异步执行完后,再发起一个action,将需要的东西渲染出来。

    所以,我们需要准备三个action:

    {type:fetching}  //执行异步期间

    {type:fetching-success,result:responseText }  //异步成功

    {type:fetching-error,error:error}  //异步失败

    好了,我们现在已经明确,在发起异步的时候一个action,执行完异步后一个action。但是,具体一个异步怎么操作呢?

    我一开始的想法是在组件中的自定义方法里,写异步的代码。发起ajax或promise,在回调里dispatch(action)来更新视图。但文档里给出了不一样的思路。

    它将异步操作的代码封装到一个action creator的返回值中!!!

    nani????

    这大概是为了贯彻redux的理念。app中的各部分都有纯粹而限定的职责,reducer只负责计算新state、P组件只负责渲染、C组件只负责获取update后的state和disptach方法传递给P组件。

    而异步操作,同样被归类为一种action(action可能会改变state)。所以异步操作的代码被放到action creator的返回值里。

    但是dispatch方法只能接收js对象呀。

    这就需要用到一个中间件----redux-thunk

    我们知道,在使用dispatch方法传送一个action给reducer的时候,这个过程是同步的。一旦reducer获取action,就一路执行,直到state更新。

    所以我们要在action到达reducer之前,实现异步的代码。这就用到了中间件redux-thunk。

    redux-thunk让dispatch方法可以接收函数作为参数,并执行判断:

      如果是js对象,直接送到reducer。

      如果是函数,执行它(相当于截获了它)。所以这个函数我们设计为一个异步操作,先发出一个action表示“正在异步”,等操作完成再dispatch一次action表示“异步完成”

    下面是实例:

    index.js

    1 import { createStore, applyMiddleware } from 'redux';
    2 import thunk from 'redux-thunk';
    3 
    4 let store = createStore(
    5   Reducer,
    6   applyMiddleware(thunk)
    7   )

    actionCreator.js

     1 export const fetchWeather = (cityCode)=>{
     2   return (dispatch)=>{
     3   const apiurl = `/data/cityinfo/${cityCode}.html`;
     4   dispatch(fetchWeatherStarted());
     5   console.log('now show waiting')
     6   fetch(apiurl).then((response)=>{
     7   if(response.status!==200){
     8       throw new Error('Fail');
     9   }
    10   response.json().then((responseJson)=>{
    11     dispatch(fetchWeatherSuccess(responseJson.weatherinfo));
    12 
    13   }
    14       ).catch((error)=>{
    15           throw new Error('Invalid json response');
    16       });
    17 
    18   }).catch((error)=>{
    19     dispatch(fetchWeatherFailure);
    20   }
    21       );
    22   };
    23   }

    在actionCreator.js中,fetchWeather函数返回的不是一个js对象,而是一个函数

    这个函数的可以有两个参数dispatch和getState,都是store的成员方法。这个函数执行的是一个异步操作,fetch一段数据,在fetch之前发出一个pending action,成功后再发出一个success action。

    中间件其实有很多,还有redux-promise等。

    redux-thunk是最常用的异步中间件,它让disptach能接收函数作为参数,使得我们能在actionCreator中返回一个函数,在这个函数中设计异步操作,并在异步操作的开始和结束时刻发送action来控制视图的渲染。

     附上一个知乎上的问题:Redux有哪些最佳实践?

     

  • 相关阅读:
    canvas裁剪图片
    Dubbo
    SpringBoot请求参数传递与接收
    神经网络量化入门--Add和Concat
    防火墙如何设置特定IP访问指定端口
    如何解释 On-Premises、IaaS、PaaS、SaaS、 Serverless 的区别?
    screw一键生成数据库文档,无需重复CV大法
    获取application.properties中配置的路径
    《《《发布项目引入的jar包,运行不报错打包发布项目时候报错
    IDEA maven mvn install无法引用手动导入的jar包的解决方式
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7527688.html
Copyright © 2011-2022 走看看