redux-thunk 源码解读

不用redux-thunk之前

// store.js
import { createStore } from 'redux';export const reducer = (state = {count: 0
}, action) => {switch(action.type) {case 'CHANGE_DATA': {return {...state,count: action.data}}default: return state;}
}
export const store = createStore(reducer);

// App.jsx
class ReduxTest extends React.Component {constructor(props) {super(props);store.subscribe(() => {console.log('subscribe')this.setState({count: store.getState().count})})}changeData = () => {const { count } = store.getState();const action = {type: 'CHANGE_DATA',data: count + 1}store.dispatch(action);}render() {return (<div><span>{this.state?.count}</span><button onClick={this.changeData}>按钮+1</button></div>)}
}
export default ReduxTest;

对于上述代码，我们dispatch一个action，其中action必须为一个对象。

但是实际开发中，action里的数据往往是一个异步接口获取的数据，这个时候，我们可以

class ReduxTest extends React.Component {constructor(props) {super(props);store.subscribe(() => {console.log('subscribe', store.getState());this.setState({count: store.getState().count});});}changeData = () => {const { count } = store.getState();let res;const p = new Promise(resolve => {setTimeout(() => {res = 111;resolve(res);}, 1000);});p.then(r => {const action = {type: 'CHANGE_DATA',data: r};store.dispatch(action);});};render() {return (<div><span>{this.state?.count}</span><button onClick={this.changeData}>按钮+1</button></div>);}
}
export default ReduxTest;

但是，上述会把处理的异步的逻辑写在组件里，使代码变得混乱，
因此，假如我dispatch一个函数，在这个函数里去处理异步的逻辑，岂不是使代码变得更简洁？！

const getData = () => {let res;const p = new Promise(resolve => {setTimeout(() => {res = 111;resolve(res);}, 1000);});p.then(r => {const action = {type: 'CHANGE_DATA',data: r};store.dispatch(action);});
};
class ReduxTest extends React.Component {constructor(props) {super(props);store.subscribe(() => {console.log('subscribe', store.getState());this.setState({count: store.getState().count});});}changeData = () => {const { count } = store.getState();store.dispatch(getData);};render() {return (<div><span>{this.state?.count}</span><button onClick={this.changeData}>按钮+1</button></div>);}
}
export default ReduxTest;

这样，就将组件和异步处理逻辑进行了解耦。

总结：

其实没有redux-thunk，也可以完成同样的功能，只是将处理异步逻辑的代码写在组件里，为了让代码更简洁、解耦，所以通过redux-thunk可以dispatch一个函数，然后在这个函数里处理异步操作。
redux-thunk 源码参考：https://segmentfault.com/a/1190000022792225

redux-thunk 源码解读相关推荐

Redux 源码解读 —— 从源码开始学 Redux
已经快一年没有碰过 React 全家桶了,最近换了个项目组要用到 React 技术栈,所以最近又复习了一下:捡起旧知识的同时又有了一些新的收获,在这里作文以记之. 在阅读文章之前,最好已经知道如何使用 ...
dva处理_dva 源码解读
声明本文章用于个人学习研究,并不代表 dva 团队的任何观点. 原文以及包含一定注释的代码见这里,若有问题也可以在这里进行讨论起步为什么是dva? 笔者对 dva 的源代码进行解读,主要考虑到 ...
html 源码知识,源码解读
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
Bert系列（二）——源码解读之模型主体
本篇文章主要是解读模型主体代码modeling.py.在阅读这篇文章之前希望读者们对bert的相关理论有一定的了解,尤其是transformer的结构原理,网上的资料很多,本文内容对原理部分就不做过多 ...
Bert系列（三）——源码解读之Pre-train
https://www.jianshu.com/p/22e462f01d8c pre-train是迁移学习的基础,虽然Google已经发布了各种预训练好的模型,而且因为资源消耗巨大,自己再预训练也不现 ...
linux下free源码,linux命令free源码解读：Procps free.c
linux命令free源码解读 linux命令free源码解读:Procps free.c 作者:isayme 发布时间:September 26, 2011 分类:Linux 我们讨论的是linux ...
nodeJS之eventproxy源码解读
1.源码缩影 !(function (name, definition) { var hasDefine = typeof define === 'function', //检查上下文环境是否为AMD ...
Koa2和Redux中间件源码研究
一.Koa2中间件源码分析在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...
PyTorch 源码解读之即时编译篇
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达作者丨OpenMMLab 来源丨https://zhuanlan.zhihu.com/ ...
Alamofire源码解读系列(九)之响应封装(Response)
本篇主要带来Alamofire中Response的解读前言在每篇文章的前言部分,我都会把我认为的本篇最重要的内容提前讲一下.我更想同大家分享这些顶级框架在设计和编码层次究竟有哪些过人的地方?当然, ...

redux-thunk 源码解读

总结：

redux-thunk 源码解读相关推荐

最新文章

热门文章