使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

github地址

github仓库

在线访问

初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话，先安装 npm install -g create-react-app 目录结构改造 |--config |--node_modules |--public |--scripts |--src |-----api //api接口 |-----components //组件 |-----pages //页面 |-----plugins //插件相关 axios |-----router //路由 |-----store //redux |-----styles //公共样式 |-----utils //工具包 |-----index.js //入口 |--package.json Vscode插件安装

所谓工欲善其事，必先利其器。这里我们推荐一些好用的vscode插件(参考https://www.cnblogs.com/xbzhu/p/10823300.html)

1. 代码提示类插件 1.1 Reactjs code snippets 1.2 React Redux ES6 Snippets 1.3 React-Native/React/Redux snippets for es6/es7 1.4 JavaScript (ES6) code snippets(es6代码片段) 1.5 Typescript React code snippets(这是tsx的react组件片段) 2. 美化类插件 2.1 One Dark Pro(atom风格主题) 2.2 vscode-icons(文件图标) 3. 其他实用类插件 3.1 Beautify css/sass/scss/less(样式代码格式化) 3.2 npm Intellisense(对package.json内中的依赖包的名称提示) 3.3 Path Intellisense(文件路径补全) 3.4 cssrem(px转换为rem) 3.5 CSS Modules(对使用了css modules的jsx标签的类名补全和跳转到定义位置) 4.vscode配置设备同步 Settings Sync 有了它就不用每次换个开发环境又重新配置一遍vscode了 5.另外，react的jsx补全html标签需要在vscode单独设置一下 首选项-设置-搜索‘includeLanguages’-编辑settings.json添加如下代码即可 "emmet.includeLanguages": { "javascript": "javascriptreact" }

最后，安装完插件之后，以下两个快捷键可能会经常使用

rcc 生成有状态的组件代码块
rfc 生成无状态的组件代码块

使用axios插件请求数据并封装api请求

1、安装

npm isntall axios --save

2、创建axios.js文件

主要是用来创建axios实例，添加请求拦截，全局处理一些业务逻辑，例如全局loading展示，返回状态码处理等 。
具体的配置可查看axios

3、创建api目录，并新建index.js文件

import axios from '../plugins/axios'; let api = { // app列表 appListData(params){ return axios.get('/mock/appListData.json', params); }, // 推荐 recommendData(params) { return axios.get('/mock/recomendData.json', params); }, // 搜索 lookUp(params) { return axios.get('/mock/lookUp.json', params); } } export default api

4、组件中使用

import $api from '../api/index.js'; $api.recommendData({}).then((response) => { let feed = response.feed; this.setState({ recommendList: feed.entry }) }).catch(err => { console.log(err) }) axios拦截器添加全局loading，多个请求合并一个loading

通过配置axios的过滤器，可以拦截用户请求，我们在这里添加全局loading，返回时在隐藏loading的显示。这里有个问题需要解决的是，如果同一时刻我们发起多个请求，那么会出现多个loading的问题，解决办法就是，通过设定一个count变量来记录当前接口请求数量，当count为0时再结束loading。

showFullScreenLoading、tryHideFullScreenLoading要干的事儿就是将同一时刻的请求合并，声明一个变量needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
另外还可以通过参数形式设定不需要显示loading的请求，在拦截处通过判断来显示

1、在common.js文件中添加如下代码

import { Toast } from 'antd-mobile' /** * 显示loading */ function showLoading(){ Toast.loading('加载中...', 0); } /** * 隐藏loading */ function hideLoading(){ Toast.hide(); } /** * 合并请求，同一时刻只显示一个loading */ let needLoadingRequestCount = 0 export function showFullScreenLoading() { if (needLoadingRequestCount === 0) { showLoading() } needLoadingRequestCount++ } export function hideFullScreenLoading() { if (needLoadingRequestCount <= 0){ return } needLoadingRequestCount-- if (needLoadingRequestCount === 0) { hideLoading() } }

2、在axios中使用

import { showFullScreenLoading, hideFullScreenLoading} from '../utils/commons' // Add a request interceptor _axios.interceptors.request.use(function (config) { // Do something before request is sent showFullScreenLoading(); return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor _axios.interceptors.response.use(function (response) { // Do something with response data setTimeout(() => { hideFullScreenLoading(); }, 1000); return response.data; }, function (error) { // Do something with response error return Promise.reject(error); }); 配置react-router