React+Redux实现追书神器网页版

引言

由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读,聚合资源的开源项目。但是由于正好在学习开源的Android小说阅读器--任阅,加上api比较全,开始边学边做,项目地址在这里,如果有好的意见欢迎提issue或pr。

效果图

目录结构

├─actions #redux的action,业务逻辑

├─components #页面容器

│ └─common #公共目录

│ ├─component-module #封装的组件

│ ├─images #项目图片

│ │ └─icon

│ └─style #组件样式

├─modules #公用模块

│ ├─api #管理api请求类

│ └─constants #公共字段类

├─reducers #redux中的reducers,处理action发送的数据流

├─router #路由管理模块

├─store #redux中的store,联结reducers

└─template #存放html模版

项目的初始结构和说明已罗列如上。

下面对目录结构作以下说明

  • 项目最初始是参考react-pxq初始化的。
  • 中间件引人日志中间件--redux-logger,异步API调用--redux-thunk等;
  • component-module和components存放的都是react组件,区别是:页面组件就放在components中,和模块组件(比如左侧菜单组件、书籍列表组件等)就放到 component-module中;
  • 页面状态等公共部分最好是独立起来,统一管理;
  • 跨域配置使用pathRewrite字段,需要注意webpack-dev-server的版本

准备工作

  • 整体上分两个部分:

    1.整理API

    2.学习redux(搭建脚手架)

API数据

  • 数据来源主要是两个地方:一个是开源的Android项目与RN版本的数据,另一个是追书神器h5移动端
  • 数据跨域:网上查了不少方法,考虑到便捷,使用反向代理的方式处理

学习Redux

前面8章主要是熟悉接下来会用到的基础概念,当然每一章讲玩理论,后面都会动手实践敲代码,由浅入深。

9,10两章开始使用上面学到的内容,进行搭建一个简单的项目;基本上每一天看个1-2章,玩的也很开心,花费了一个星期多。

这部分内容是后面在搭建环境的时候看的,对于reducers,action,store的内容比较深入,加深理解。大概花了3天。

技术栈

  • 虽然列了众多核心库,但是自己也谈不上熟练运用,所以罗列了一些遇到的问题和后期改进的东西。

Webpack(1.x)

  • 本项目主要用了第三方的脚手架,学习了反向代理部分,当然自己也搭建过webpack,后续会升级webpack。
  • 这里提下反向代理部分,关于使用webpack-dev-server进行配置反向代理的时候,如果使用pathRewrite到属性需要注意webpack-dev-server版本,这个属性是在1.15.0中,不然是不起作用的。网上查到相同问题没有这个解释这里讲下,以免浪费时间。

Redux

  • 简单的讲他是一个管理单向数据流的框架,根据业务复杂度可以把控其中颗粒度。一开始学习的时候感觉反而把项目复杂化,看原理也是半懂不懂,后面不断实践理解前面看的内容,总归理论要与实践结合起来。

    模型如下:简单的数据流向可以看作View -> Action -> (Middleware) -> Reducer

React-router(2.x)

react-router(2.x)与react-router(4.x)的还是不同的,当然主要是写法上,所以没更新到4.0

另外, 发布打包时使用nginx等应用服务器托管的时候需要配置下,所用路由走index.html文件,不然路由会被拦截。

Antd(2.13)

  • antd是(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出的一个中台设计语言 Ant Design,使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司,其中包括了移动端,Web端,Pro(最近刚出)
  • 遇到错误可以翻看Antd的issues,基本能解决。
  • 提Issues的话要符合一定规范,一开始感觉麻烦,后来看了提问的智慧,恍然大悟这部分的必要性。

扩展内容

功能扩展

  • 讨论区数据统计分析,主要想知道一段时间的热点内容。

测试及优化

  • 现在项目代码是没有进行单元测试,后续学习集成JEST测试
  • 优化部分页面的组件以及一些bugs
时间: 2024-10-20 15:18:51

React+Redux实现追书神器网页版的相关文章

推荐一款很好用的小说APP——追书神器

在当今的社会中,看小说的人越来越多,如何找到一本好看的小说成为了许多小说迷的一大难题.我今天向大家推荐一款很好用的的小说软件--追书神器,它可以最大程度的解决大家关于小说的各种难题. <追书神器>是一款最新最快最全的小说导读助手,涵盖各大网站最火的连载小说,最及时的连载更新提示,最有趣的个性榜单推荐,小说阅读必备app. <追书神器>有许多功能,就我而言,其中比较好的功能有: 1.超快更新提示,更新后10分钟内提示您: 2.支持国内各大站热门小说,随时换源: 3.章节预加载,无等待

连载神器测评|更专业的连载小说追书App

应用介绍: 连载神器,新一代免费小说追书神器.连载神器是连载阅读旗下一款专注小说浏览阅读软件.百万热门小说实时更新提醒,精致版式设计,畅享无广告舒适体验.连载神器新创互动社区属性--连载号,实现集书评.交友于一体的新型实时互动的阅读体验,打造新一代免费追书神器. 应用信息: 应用名称:连载神器应用版本:v2.0界面语言:简体中文应用类型:小说阅读软件应用定位:免费小说追书神器,来连载神器免费追书测评机器:小米8应用下载:Shenqi.lianzai.com 连载神器 应用特色: 聚合全网免费小说

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

二手书网页版mis系统

在小学期这几天的时间,自己将上个学期做的书书网二手书app做出了网页版.该系统只要分为前端用户界面和后端管理员界面. 管理员具有添加书的一级分类和二级分类的功能. 用户具有买书和卖书的功能. 下面是源程序和截图: 截图: 前台界面:     后台界面: 这里的分类用了二级菜单的模式,如果不选择父类,就是添加一级分类,否则就是某一级分类下的二级分类. 下面是源程序的下载路径:(数据库表我就不展示了),主要是一些javabean和servlet.如果想要所有的源代码可以联系我. https://pa

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.) 余博伦· 2 个月前 原文链接:A Study Plan To Cure JavaScript Fatigue 作者:Sacha Greif 和大家一样,最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016. 显然这篇文章击中了人们的痛处.它在Hacker News上排了不止一次第一.同样也是/r/javascript上最火的一篇,在Med

react+redux教程(四)undo、devtools、router

上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo的官方示例代码来学习,在redux中使用撤销功能.devtools功能.以及router. 例子 这个例子是个计数器程序,包含计数器.右边的redux开发工具.还有一个路由(不过只有“/”这一个地址). 源代码: https://github.com/lewis617/myReact/tree/ma

学习PHP爬虫--《Webbots、Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)》

<Webbots.Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)> 译者序 前言 第一部分 基础概念和技术 第1章 本书主要内容3 1.1 发现互联网的真正潜力3 1.2 对开发者来说3 1.2.1 网络机器人开发者是紧缺人才4 1.2.2 编写网络机器人是有趣的4 1.2.3 网络机器人利用了“建设性黑客”技术4 1.3 对企业管理者来说5 1.3.1 为业务定制互联网5 1.3.2 充分利用公众对网络机器人的经验不足5 1.3.3 事半功倍6 1.4 结论

javascript实现移动端网页版阅读器

现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书.古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我们眼里仿佛是比盘子里的午餐肉更加美味可口的东西. 而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河. 岁月在流逝,时代在进步. 愿放下所有的浮躁,在新的时代愉快地生活,无

IT项目管理(原书第7版)——互动出版网

这篇是计算机类的优质预售推荐>>>><IT项目管理(原书第7版)> 译者序 1984年,美国项目管理协会(Project Management Institute,PMI)推出了项目管理知识体系(Project Management Body of Knowledge,PMBOK),描述了以项目为研究对象的知识板块,以多维.横断.交叉等全息方式聚集相关知识,反映了当前社会快速发展和变化的需求,得到国际学术界和产业界的积极响应. 在过去的30多年中,随着全球经济和政治的巨