前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React-Redux-thunk

React-Redux-thunk

原创
作者头像
杨不易呀
修改2023-10-01 08:14:29
2130
修改2023-10-01 08:14:29
举报
文章被收录于专栏:杨不易呀

前言

React-Redux-Thunk是一个用于处理Redux异步操作的中间件,它扩展了Redux的能力,使您能够更轻松地处理异步操作,如网络请求或定时任务。

通常,Redux的reducers是同步的,但在现实应用中,需要在数据获取或其他异步操作完成后才能更新状态。这就是React-Redux-Thunk发挥作用的地方。

当前保存异步数据存在的问题

异步数据既然要保存到 Redux 中, 所以获取异步数据也应该是 Redux 的一部分,所以获取异步数据的代码应该放到 Redux 中, 而不是放到组件生命周期方法中。

在 Redux 中获取网络数据

  • 使用 redux-thunk 中间件

redux-thunk 作用

默认情况下 dispatch 只能接收一个对象, 使用 redux-thunk 可以让 dispatch 除了可以接收一个对象以外, 还可以接收一个函数, 是的通过 dispatch 派发一个函数的时候能够去执行这个函数, 而不是执行 reducer 函数。

使用 redux-thunk

  • 安装 redux-thunk
代码语言:shell
复制
npm install redux-thunk
  • 在创建 store 时应用 redux-thunk 中间件

修改 store.js:

代码语言:javascript
复制
import {createStore, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'

import reducer from './reducer';

// 创建store之前,通过applyMiddleware方法,告诉Redux需要应用哪些中间件
const storeEnhancer = applyMiddleware(thunkMiddleware);
// 利用store来保存状态(state)
const store = createStore(reducer, storeEnhancer);

export default store;
  • 在 action 中获取网络数据
代码语言:javascript
复制
export const getUserInfo = (dispatch, getState) => {
    fetch('http://127.0.0.1:7001/info')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            console.log('在action中获取到的网络数据', data);
        })
        .catch((error) => {
            console.log(error);
        });
}
  • 在组件中派发 action
代码语言:javascript
复制
import React from 'react';
import {getUserInfo} from "../store/action";
import connect from "../connect/connect";

class About extends React.PureComponent {
    componentDidMount() {
        this.props.changeInfo();
    }

    render() {
        return (
            <div>
                <p>{this.props.info.name}</p>
                <p>{this.props.info.age}</p>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        info: state.info
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        changeInfo() {
            dispatch(getUserInfo);
        }
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(About);
  • 最终在 action 当中保存数据,在派发的方法当中会自动的将 dispatch 传入到方法的参数列表上,然后可以在通过 dispatch 在此派发任务进行保存数据,更改 action.js
代码语言:javascript
复制
export const getUserInfo = (dispatch, getState) => {
    fetch('http://127.0.0.1:7001/info')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            dispatch(changeAction(data));
        })
        .catch((error) => {
            console.log(error);
        });
}

注意点

默认情况下 dispatch 方法只能接收一个对象, 如果想让 dispatch 方法除了可以接收一个对象以外, 还可以接收一个方法, 那么我们可以使用 redux-thunk 中间件, redux-thunk 中间件的作用,可以让 dispatch 方法可以接收一个函数, 可以让我们在通过 dispatch 派发任务的时候去执行我们传入的方法。

总结

  • 使用 redux-thunk 之前的流程
代码语言:text
复制
                 --------------------
        ------>  | Component 异步请求 |  -----
       |         --------------------       |
       |                                    ↓
-------------       -------------       -------------
|   Store   | <---- |  Reducer  | <---- |  Action   |
-------------       -------------       -------------
  • 使用 redux-thunk 之后
代码语言:text
复制
                    -------------
        --------->  | Component |  ---------------------------------
       |            -------------                                   |
       |                                                            ↓
-------------       -------------       -------------       -------------
|   Store   | <---- |  Reducer  | <---- |  异步请求   | <---- |  Action   |
-------------       -------------       -------------       -------------

官方文档地址

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

输入图片说明
输入图片说明

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 当前保存异步数据存在的问题
  • 在 Redux 中获取网络数据
  • redux-thunk 作用
  • 使用 redux-thunk
  • 注意点
  • 总结
  • 官方文档地址
  • 最后
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档