React-boilerplate
本项目继承自 react-boilerplate
场景
为了固定开发场景和习惯,快速理解 react 周边技术栈的应用场景和概念原理,建立此项目。
本项目基本上可以囊括80%以上的 react 相关技术(栈),你可以通过书写相对底层的代码来建立整个开发流程,并且兼顾性能。
特性
- 包含了 react-boilerplate#features 所有优点
- 支持 HTTPS
npm run start:https
需要在项目根目录下配置名为 localhost.pem 和 localhost-key.pem 的公私钥 - 强制
eslint
检查 - 去除了
i18n
- 去除了
immutable
,采用了immer - 自定义的 react-loadable
- 采用 css in js 写法
- 默认包含 antd 样式,默认进行了引用优化 babel-plugin-import
- redux-actions 将
switch case
转化为hash map
使用
- npm install
- npm start
如何新建 container
仿照上面的命令行的方式新建一个container
,会发现再 app/container
目录下增加了 Y 目录,最终再 containers/App
下修改增加路由,即可。
<Route exact path="/test" component={TestPage} />
开发套路
可以通过浏览 app/containers/HomePage
中的内容查看套路
重点阐述
关于reducer actions constants saga selectors immutable 之间的关系
reducer
中建立initialState
初始化数据constants
这里定义了一些actions
的类型actions
直接暴露给外界的方法,通过dispatch
直接调用reducer
通过action
返回的类型,修改相应的数据,是最底层触发数据修改的人员selectors
本质上是通过闭包来缓存数据,主要是选择数据,从相应的reducer
中选取你想要的数据sagas
主要是用来控制异步事件,不只是API层面的异步请求,包括用户交互页面逻辑等
举个例子
假如,用户输入一个name,查询name的列表
- 从
reducer
中初始化name
-> constants
定义触发获取列表的类型GET_LIST
->actions
中定义getList
方法,并且接受用户输入的参数name
, 并返回给saga
->saga
接收到name
参数后开始ajax
请求获取数据 调用call
方法 ->- 数据传递给
reducer
进行修改,因此saga
进行watch
了请求方法,调用takelatest
方法,当ajax
请求结束后告诉reducer
,同时将相应的type
传递给reducer
-> reducer
通过类型和新的数据重新set/update
数据 ->selectors
进行数据对比,获取数据 ->react
重新渲染页面
TODO
- redux-auth-wrapper
- webpack progress
- webpack notify
- immer handleActions 重写