React -- redux-thunk的简单使用

心已赠人 2022-04-13 12:13 227阅读 0赞

为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。

使用redux-thunk中间件，我们可以在action构造器中返回一个函数，而不是一个对象。

export const initStateAction = (data) => ({
        type: INIT_LIST_ACTION,
        data
    })
    
    export const getListAction = () => {
        return (dispatch) => {
            axios.get("/data.json").then((res) => {
                const data =res.data;
                const action = initStateAction(data);
                dispatch(action); 
           })
        }
    }

我们注意到第二个action其实是返回了一个函数，我们函数内部进行了一次ajax请求，然后又发送了一次action,dispatch给redu

cer，进行相关处理。

componentDidMount () {
            const action = getListAction();
            store.dispatch(action);  
        }

使用方法和其他普通的action一样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

middleware就是中间件。

应该很清楚了吧，使用redux-thunk让我们可以在action构造器返回一个函数，dispatch时会执行它，然后在函数内部会发送一个普通action给reducer。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220413/5077ebaab34c4824b1eb14d9b1809cbb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 ① React 介绍及JSX简单使用

React 专栏简述 React的特点 React的基本使用（测试语法） JSX理解和基本使用 HelloWorld

迷南。/ 2022年10月26日 01:27/ 0 赞/ 142 阅读

相关 React的简单介绍

react是Facebook开发的一款用于构建用户界面JS库。 react主要用于构建UI，只是MVC框架中的“V”。 -------------------- re

浅浅的花香味﹌/ 2022年05月31日 10:23/ 0 赞/ 195 阅读

相关 react-6 react-router-dom 的简单使用（1）

之前我们了解了react-router-dom是路由的组件，下面看看这个路由的组件的使用；我们之前使用create-react-app 创建了简单的项目目录：my-app-

曾经终败给现在/ 2022年04月23日 11:50/ 0 赞/ 132 阅读

相关 React - Context的简单使用

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向

朴灿烈づ我的快乐病毒、/ 2022年04月15日 05:07/ 0 赞/ 150 阅读

相关 React - React-Router的简单介绍

Router中文意思是路由，以前多见于后端，现如今前端也有自己的路由。为什么要使用路由？ 1：单页页面实现页面的切换 2：可以通过URL对页面进行定位 3：语义化组织

港控/mmm°/ 2022年04月14日 02:49/ 0 赞/ 146 阅读

相关 React -- redux-thunk的简单使用

为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。使用redux-thunk中间件，我们可以在action构造

心已赠人/ 2022年04月13日 12:13/ 0 赞/ 228 阅读

相关 react-4 简单的组件的使用

之前我们基于 create-react-app 创建出下面目录结构的项目： ![20190215114853784.png][] 我们也简单了解了react 是如何

女爷i/ 2022年03月19日 05:24/ 0 赞/ 123 阅读

相关 react-8 react-router-dom 的简单使用（3）

在上一篇中，我们实现了项目默认进入首页，然后手动修改页面地址，显示相应的页面；现在我们实现下面的功能，进入项目，默认显示首页，首页中有三个按钮，点击相应的按钮，跳转到相应的

小灰灰/ 2022年03月18日 08:28/ 0 赞/ 118 阅读

相关 react-7 react-router-dom 的简单使用（2）

之前，我们尝试了类似 tab选项卡功能的路由学习；现在我们来看下基本的各个页面间的路由的实现；下面实现一个基础的四个页面的项目的路由的处理：我们默认进入首页

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:27/ 0 赞/ 128 阅读

相关 React-Native 数据存储之react-native-storage的简单使用

`react-native-storage`是封装好的数据存储组件，安装方法见：[https://github.com/sunnylqm/react-native-storag

布满荆棘的人生/ 2022年03月06日 16:12/ 0 赞/ 497 阅读