Byemess-基于React&redux的在线Todo运用

为什么又是Todo,全球的初学者都在做todo吗?可以很多人要问这句话,着实这句话可以等同于:

  • 为什么你做了个云音乐播放器?

  • 为什么你做了个消息浏览APP?

  • 为什么你做了个VUE/REACT版本的CNODE?

究其实质,这几个应用都是data-map情势,哈哈哈哈这是我本身创的词,意义就是说,实质都是拿到一组数据,然后就像遍历数组一样将这些数据遍历衬着,这类project都可以算是pure-data-driven的。

至于我为什么做了Todo,答案很简单,我初学react&redux时打仗的例子就是Todo,将这个app举行功用拓展,将会应用到react和redux的种种特征。

这个App的UI直接参考了知乎@黄玄的Vue写的TodoApp,已取得他本人的允许。设想活儿太磨人,本着闇练react&redux的项目实战的目的,UI和交互就没有想花太多时刻去设想,直接照着模样写了一个,他的代码我可一个字都没看过,别喷我山寨哈哈哈。

在线地点

Byemess

源代码

Github
假如对你有有所启示或许协助,送我一个star吧 :)

预览

Login

《Byemess-基于React&redux的在线Todo运用》

Logged

《Byemess-基于React&redux的在线Todo运用》

Main

《Byemess-基于React&redux的在线Todo运用》

Add Todo

《Byemess-基于React&redux的在线Todo运用》

Responsive

《Byemess-基于React&redux的在线Todo运用》

Drawer

哈哈哈用drawer来插进去一下自我推行的信息貌似是经常应用套路?重要的页面导航应用bottomBar去切换,如许切换起来越发轻易。
《Byemess-基于React&redux的在线Todo运用》

目次组织

《Byemess-基于React&redux的在线Todo运用》

规范目次组织,有两个处所提一下:

  1. styled 用来存储一切经由styled-components举行装潢后的组件,清一色presentational components,所以移入components目次下是没有题目的,但考虑到它的feature,在项目存在潜伏范围扩展可以时,经由过程Feature举行分类更好,所以就没有举行兼并。

  2. 关于components 和 container的分类市面上真是八门五花,对我而言,我更偏向追随redux作者(真是帅啊)的定义: It's up to whether the component is aware of Redux,浅显点说,不须要connect至store的组件都不是container. 如许确实make sense, 不过在组件的分派上会显得有点新鲜,这就比较考功力和履历了。

Function

  • Single Page App

  • 在线注册账号,数据存储于leanCloud。

  • todoItem增编削,数据同步到云

  • 依据完成状况切换视图

  • 增加日期标签,一切item按日期分组

TechStack

  • React: 全套ES6及以上语法,性命周期函数,ref操纵,动态衬着,无奇不有。

  • Redux: 采纳最好实践,针对差别的逻辑state治理举行拆分,然后combine之. 采纳Thunk处置惩罚Action,掌握异步操纵。

  • React-Routerv4:跟之前的版本有明显变化,构建单页APP利器。

  • Styled-Components: 强推,什么BEM,什么CSS-Module,统统靠边,连系Helper: Styled-props,彻底处理css组件化计划。离别预处置惩罚器,防止制造更多进修本钱。

  • Webpack: 自动化构建,采纳chunkhash体式格局分类打包文件,优化用户缓存战略。

  • CSS3: 连系CSSTransitionGroup,竖立组件过场动画,优化体验。

  • underscore: 用它照样用lodash都行,我只是须要用一下内里的debounce,用来掌握edit todoItem时API通讯的频次。着实本身手写一个helper也行,在进修redux的练手项目里我就手写= = 。

后续可以优化应用的:

  • reselect: 再也不必手写那么多反复的state selector了!

  • immutable: 觉得函数式的威力。

  • redux saga: 2017年了,还不应用generator的异步action掌握系统。

Problem

  1. state的设想重要针对数据的猎取与查找战略,模拟数据库的体式格局,竖立LookupTable,存储目的id,遍历id举行数据拉取。如许的体式格局优点是在分状况显现todoItems时只须要操纵id,而不须要操纵数据实体,进步机能。 然则同时也碰到一个题目: 针对查找战略对应肯定的api层组织相对耦合,数据拉取体式格局没法当地模拟,因而让我摒弃了应用LocalStorage的举行离线状况的支撑。 黄玄的战略是优先举行当地操纵,用户可以挑选上传或许下载数据,这个体式格局不错,对我有所启示。 过分对数据模子举行装潢的结果就是高耦合,这跟我初志是基于在线存储数据有关。 算是一个经验。

  2. 之前想要给登录胜利页面增加延时跳转的功用,以便应用户体验越发完全,然则尝试未果,原因是login页面和list页面实质上是两个route下的组件,举行切换时会举行拉取数据 => Re-render,一旦我登录后再次进入login页面,不管我在login组件里怎样尝试记录上一次的状况举行比对(componentWillReceiveProps),都是白费。 厥后想到根目次下App组件可以举行connect保留一个登录的flag,以此来确保第一次从未登录状况进入登录状况常常才会举行跳转。然则我没有如许做,我着实不想污染APP这个root组件,除非再包一层…

  3. 跳转部份React-router并没有供应更多API,其Redirect的时刻上的可操控性不高,只能依靠注入BrowserHistory属性来举行人工push地点,略为貌寝。鄙人才疏学浅,置信不久后能找到更文雅的体式格局。

总结

我的不足

  • 消耗时长:从进修React&Redux最先,花费了相对较多的时刻在进修相干的综合学问(组件设想,组织设想,reducer,action的组织最好实践等等),使得我的项目迟迟未能完工,个人可以更习气有所深度的进修后再举行实践,也是贪了想少走弯路的动机。然后习气性被炫酷的手艺吸收,研讨了两天react-motion(敬拜@chengmo大神啊,我们中国小伙有伶俐),因为当时想要完成drag Sortable List的结果,厥后回过神来,先做出基本再说!这个APP从做出原型到重构修正总工时大略盘算也许不到8天,假如撸起袖子直接干,应当可以压缩到6天。固然了进修本钱不可疏忽,我给本身的时长盘算时从0相识到输出制品。

  • App结果: 给本身打7分,可优化拓展的东西太多。还记得我说的data-map模子吗?我完全可以把这个App打造成一个事情台,把之前那些满地飞的项目都席卷进来,可以加大演习手艺的力度,如许我就可以终结满知乎闹的什么“为什么vue的demo比react多”之类的无聊话题,纯属Vue好上手!文档亲热直白如私教!各大中文网示例重构demo多到不可好吗!光是react这英文环境就够国内60%顺序猿吃一壶了。(扯远了哈哈哈)

夸夸本身

  • 实时总结: 进修的时刻轻易懵逼轻易影象断片怎么办!?这一度让我很苦恼,为了加快进修历程,惟有: 总结!梳理!写博客!因而诞生了这俩货:(新手朋友们看一看对观点道理明白肯定会有协助)

  • 自学上手效力: 曾一度不是很自信,固然了都是老大徒伤悲如此,对本身的实在气力照样有肯定自信,我置信我可以短时刻接收并应用以至拓展所学学问,我也确实做到了。因为一最先便对react有迷之好感(这辈子第一次对一个手艺生态有这类觉得),加上本身英语无压力,浏览了很多关于react手艺栈的文章,相识了刀耕火种到如今一片大繁华的react系统下的手艺变迁,对学问系统有了一个宏观的把控,这个阶段也许一周,时期还看着网上的教程写了几个小demo用来针对练习一些手艺点:比方父子双向通讯性命周期函数应用场景异步action处置惩罚计划模拟redux内部中心功用github(1)github(2)。 我个人的头脑很发散,轻易噼里啪啦想到很远很歪,致使了之前进修过程当中缺少一致的节拍,一下捣鼓一下动画行列,一下看看源码,没有很耐久的去做一件事,此次算是美满啦。不过此次能上手这么快,也得益于之前javascript的基本,细节不保证悉数能回想,然则头脑和履历都沉淀进了本身的头脑,接下来要去找事情,还得把基本好好过一遍,重中之重!

  • 处理实际题目的才能: 如今本身处理题目的觉得越来越好,可以疾速定位题目的关键,擅用搜索引擎(我真的良久良久没有用过baidu了…),specific的题目会一股脑先用笔墨输出的情势形貌一遍,如许让题目的组织在脑中有个印象,然后过一会儿返来本身就萌生idea,然后尝试 -> 处理。 末了一句: 靠本身。

末了的末了,求star,求支撑,本人小硕应届,求引荐深圳的事情 :)

    原文作者:kylewh
    原文地址: https://segmentfault.com/a/1190000009706515
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞