Home

开发笔记

容器和组件

根据react-redux官方推荐, 一般将项目中的组件分为容器和一般组件两种
容器负责数据的绑定, 而一般组件将不依赖于redux只负责显示View
在这个项目中, 每一个容器在Redux中都拥有一个独立的命名空间用来保存状态
这个项目希望能避免跨命名空间调用, 可以让每一个容器彼此最大程度上独立
而是通过父容器向子容器通过props的方式进行传递handler来完成
如果平行的容器间需要调用一个状态, 那么应该把这个状态提升到它们共同的父容器上
这样的好处是, 如果容器A依赖容器B的状态, 如果要测试容器A, 就不得不引入容器B
如果容器B改变或者移除, 相应的容器A中的代码也要修改
在react-redux中, 一般使用connect方法将mapStateToProps和mapDispatchToProps绑定给组件 本项目采取类似的方法, 但是遵循避免HOC的原则而使用自己写的useConnecthooks

异步动作

通过redux-saga对redux实现了异步动作的支持.
saga类似一个线程,它可以fork, 可以阻塞并等待一个动作,
它可以执行基于Promise的异步操作, 它也可以dispatch一个动作, 这些都被称作effect
在本项目中saga定义在各个容器下, 动态分别加载.
为了避免重复加载, 可以使用cancel将正在运行的task终止

容器

一个容器包含常量定义constant,action creators, reducer, saga, selector和视图渲染几部分组成
其中action creators可以打包成dispatch方法, selector是store.state的方法
这两样通过自写的useConnect hooks实现了和react-redux中connect相同的功能

const Container = props => {
  const key = 'page'
  useInjectReducer({ key, reducer })
  useInjectSaga({ key, saga })
  return <Component {...useConnect({ key, selectors, actions })} {...props} />
}