为了账号安全,请及时绑定邮箱和手机立即绑定

用redux重构react画廊应用

用redux升级的galley by react

首先很感谢Materliu老师,原项目在此(React实战--打造画廊应用(上)-慕课网 http://www.imooc.com/learn/507)。 距离做这个练手项目已经过去了快一年。在此之间,有些学习有些成长。之前公司里用的是mobx,最近刚好有空,学习了redux,便产生了重构这个demo的想法。
项目地址:https://github.com/laihaibo/gallery-on-react

做了什么
  • 将原先的组件拆分为两个container,分别为控制条和图片展示区。让结构更加清晰,容易维护。
  • 将数据存储于store,所有组件共享一份数据。解决了组件间传值问题。一处改变,就可以响应式的更新。
  • 设计三个action,分别用于初始化/升级排布数组update、设置居中(后来发现其实可以省略)center、设置翻转inverse
    点击查看

    http://laihaibo.xyz/gallery-on-react/build/index.html

    安装
    1. npm i
    2. npm start
    优化
    1. 为每个component组件编写了shouldComponentUpdate
    2. 将原先的充满副作用的函数修改为声明式的函数
todo
  1. 控制条旋转图标
  2. css => less
  3. 编写devprod版本的配置文件
  4. localstorage数据持久化存储
  5. 其他优化
  6. pwa
总结
  • 重构完这个项目,我对view = f(data)的思想,有了一个更深的理解。组件间的数据传递使用reduxreact负责渲染数据,这样就够清晰,也更易维护。
  • 关于组件的拆分,如何合理利用props传递数据,数据结构设计,采用怎样的设计模式,都是值得不断优化的问题
  • just do it
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消