用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. 编写dev、prod版本的配置文件
4. localstorage数据持久化存储
5. 其他优化
6. pwa

总结

• 重构完这个项目，我对view = f(data)的思想，有了一个更深的理解。组件间的数据传递使用redux，react负责渲染数据，这样就够清晰，也更易维护。
• 关于组件的拆分，如何合理利用props传递数据，数据结构设计，采用怎样的设计模式，都是值得不断优化的问题
• just do it