异步action，redux-thunk在hooks中的应用

这一次，我们要应用react-redux的最新hooks写法，实现一个简单的异步实例。

效果很简答。当我们点击按钮的时候请求数据，页面显示加载中...，数据请求结束。渲染列表。

为了适应hooks写法。

react-redux库引入了几个新的api：

1 useSelector：

不用connect包裹，不用mapStates直接获取在reducers中预定义的state数据。

也就是说如果我们reducers写法如下：

const initialState = {list: [],loading: false}const reducers = (state = initialState, {type,payload,loading}){xxxx}export default reducers

那么我们获取list 的方式直接变成如下：

const list = useSelector(state => state.list)

2 const dispath = useDispatch()

不必通过繁琐的mapDispatchToProps，就能得到dispath，直接派发action

接下来我们开始做一些列准备。为了异步请求

---------------------action.js-----------------------

---------------------reducers.js-----------------------

---------------------index.js-----------------------

---------------------app.jxs-----------------------

我们在reducers中定义state的时候，引入了两个变量，list和loading，一个用来展示数据，一个用来模拟异步请求的加载状态。这样我们就能实现一个完整的异步请求结果

异步action，redux-thunk在hooks中的应用相关推荐

[Redux/Mobx] Redux中异步action和同步action最大的区别是什么？
[Redux/Mobx] Redux中异步action和同步action最大的区别是什么? 同步action:执行了dispatch函数之后,对应的reducer纯函数立即得到执行,reducer执行 ...
[译] Don’t call me, I’ll call you：使用 Redux-Saga 管理 React 应用中的异步 action （上）...
原文地址:Don't call me, I'll call you: Side effects management with Redux-Saga (Part 1) 原文作者:David Dvora ...
reactjs redux异步action
编码步骤异步逻辑挪到action中引入并应用中间件,让redux支持异步action yarn add redux-thunk 改造action
使用ASP.NET MVC Futures 中的异步Action
在ASP.NET MVC中使用异步是比较麻烦的,从RC1版开始ASP.NET MVC Futures中提供了几个支持异步的类. 相关的类有:AsyncActionDescriptor.AsyncCon ...
[Redux/Mobx] 在React中你是怎么对异步方案进行选型的？
[Redux/Mobx] 在React中你是怎么对异步方案进行选型的? 小项目使用简单的redux-thunk方案,增加的代码量极少,只有两个api,上手成本低大项目使用基于redux-saga的d ...
使用ASP.NET MVC Futures 中的异步Action 【转】
之前看过老赵这两篇文章.也研究了一下老赵异步的实现方式. 不过感觉自己扩展的话,在ASP.NET MVC中使用异步还真是麻烦,刚好看到从RC1版开始 ASP.NET MVC Futures中提供了几个 ...
2 中间件的使用、异步action的创建
react-redux是react插件将所有组件分成两大类:UI组件和容器组件安装npm install react-redux -S UI组件: 只负责UI的呈现,不带有任何业务逻辑不使用th ...
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组 ...
视频教程-19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频-ReactJS
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/j ...

异步action，redux-thunk在hooks中的应用

异步action，redux-thunk在hooks中的应用相关推荐

最新文章

热门文章