react+redux项目框架搭建流程
Posted shengjunyong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react+redux项目框架搭建流程相关的知识,希望对你有一定的参考价值。
一、脚手架搭建react结构目录:
1、npm install -g create-react-app 全局安装react脚手架
2、create-react-app react-demo 创建react-demo项目
3、cd react-demo 进入到项目文件夹
4、npm start 启动本地项目
二、Styled-Components与Reset.css的结合使用.
Styled-Components解决css样式表不能私有的问题,Reset.css重置不同浏览器标签默认设置
三、React-Redux进行应用数据的管理
有些组件的数据,你认为是只有该组件要用,但是随着项目不断扩展,说不定其他组件也要用,这时候既然用了React-Redux管理数据,就是要将所有的数据都交给其管理
React-Redux和Redux这两个包都是结合使用的,React-Redux有个Provider核心组件,这点注意
四、combineReducers完成对数据的拆分管理
项目越大,reducer.js代码越多,所以构建项目时候就先要进行拆分处理
五、actionCreators与constants的拆分
action对象的创建,acitonType的常量都要单独写在一个文件中进行管理
六、使用Immutable.js来管理store中的数据
Immutable对象数据修改,每次都会自动创建出一个新的Immutable对象,用Immutable来解决store中的state误被修改的问题。
七、redux-immutable统一数据格式
在第四步中,用combineReducers对拆分的reducer合并到总的reducer中,此时reducer返回的state还不是immutate对象,会造成数据格式不统一,将combineReducers原本由
redux包引入,改为由redux-immutable引入即可。
以上是关于react+redux项目框架搭建流程的主要内容,如果未能解决你的问题,请参考以下文章
Rails + React +antd + Redux环境搭建
React +Redux+ Ant Design + echarts 项目实践