使用create-react-app脚手架构建React+Redux项目及Redux的使用

前端之家收集整理的这篇文章主要介绍了使用create-react-app脚手架构建React+Redux项目及Redux的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一. 使用create-react-app搭建项目目录

首先确保安装了nodejs,再安装脚手架工具create-react-app.
使用npm运行指令create-react-app project:

运行完成后项目目录如下:

二. 项目中Redux的使用

1.入口文件创建store

也可以注册中间件方便redux调测,下面为固定写法:

2.创建自己的组件结构

3.创建action

4.创建reducers

5.使用Redux:就是两方面(派发数据更改和使用数据更改)

派发数据更改即当store中的某个数据需要更新时,我们需要dispaych(action)将最新数据更新到顶层数据store中。

使用数据更改即使用store中的数据。

如此,Redux真的很简单。

三.说一说如何使用mockJson配置假数据

1.使用Servr.js替换project\node_modules\webpack-dev-server\lib中的Servr.js

2.新建与node_modules文件夹同级的config文件夹,在config中放置配置文件api.js:

3.新建与node_modules文件夹同级的mockJson文件夹,里面放置对应的假数据json文件

四.打包

最后npm 运行 npm run build对css,js,html文件进行打包,执行完成后,会自动生成一个build文件夹,里面放置的是打包后的css,html文件

备注:本文只是具体讲解使用create-react-app构建react+redux项目以及redux的使用,而以上所贴的截图代码并不完整,只是展示关键信息,请谅解。

猜你在找的React相关文章