资讯专栏INFORMATION COLUMN

React中如何“加载更多”?

darkerXi / 2341人阅读

摘要:前提条件假设首页文章列表放于的中。思考步骤通过创建加载更多按钮组件,并绑定回调函数。理想状态函数通过出一个异步获取数据并更新中的数据,组件再重新循环输出。

前提条件:

假设首页文章列表放于 store 的 list 中。

思考步骤:

通过 styled-components 创建“加载更多”按钮组件,并绑定click回调函数A。

理想状态 函数A 通过 dispatch 出一个 action 异步获取数据并更新 store 中的 list 数据,组件再重新循环输出 list。

首要问题 通讯 ,要让首页文章模块和 store 通讯我们需要使用到 react-redux (通过提供的 Provider 标签中的 store 属性接收到store,通过 connect 函数打通模块和传入的 store 间的通讯。)

其次 获取数据,使用 axios 异步获取数据相对简单但是这部分代码写在哪最合适??因为要 dispatch 所以首先想到 mapDispatchToState ,但我们不是直接 dispatch 而是先获取异步数据,所以需要中间人介入也就是 中间件 使用 redux-thunk 可以 dispatch 函数,而函数中就可以异步获取数据并 dispatch 出携带了异步返回数据的 action。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102513.html

相关文章

  • 前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly

    摘要:杨冀龙是安全焦点民间白帽黑客组织核心成员,被浪潮之巅评为中国新一代黑客领军人物之一他在本文中依次分享了对于黑客的定义如何从黑客成为一名安全创业者技术创业踩过的坑给技术创业者建议等内容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清单专注前端领域内容,以对外文资料的搜集为...

    xorpay 评论0 收藏0
  • 前端每周清单第 29 期:Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

    摘要:前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期:Web 现状分析与优化策略...

    HackerShell 评论0 收藏0
  • React-全家桶仿简书部分功能

    摘要:全家桶仿简书部分功能前言前段时间接触了下,一直想要自己写一个小练手。在众多应用中,考虑之后选择了简书来模仿,这段时间就利用了工作之余的时间进行开发。在这里简单叙述一下我仿简书部分布局以及功能实现的过程,仅做学习用途。 React-全家桶仿简书部分功能 前言 前段时间接触了下React,一直想要自己写一个小Demo练手。在众多应用中,考虑之后选择了简书来模仿,这段时间就利用了工作之余的时...

    Jinkey 评论0 收藏0
  • 使用Vue的HOC技术开发一个无限加载列表

    摘要:高阶组件的概念,是里面经常提到的,类似于高阶函数。高阶函数高阶组件高阶组件用是代码复用的优秀工具,主要在处理逻辑方面和普适性上,有着奇效。 前言 在web开发上,我们都对数据采用分页加载的机制,一种变形就是在页面采用循环加载的机制,拉到页面最下方有个加载更多的按钮。问题在于,当不同的数据要展示时,就要写很多这种列表,但是其中的逻辑都是相似的。 维护一组数据 加载更多数据 将数据用对应...

    stefan 评论0 收藏0
  • 记录一下自己的春招,唯品会、360、京东offer已收、腾讯offer_call已达!!!

    摘要:春招结果五月份了,春招已经接近尾声,因为到了周五晚上刚好有空,所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底,截止今天,已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。 春招结果 五月份了,春招已经接近尾声,因为到了周五晚上刚好有空,所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底,截止今天,已经斩获唯品...

    freewolf 评论0 收藏1

发表评论

0条评论

最新活动
阅读需要支付1元查看
<