好久没写文章了，今天就来介绍下最近写的react hook的练手项目，用到相关的技术有以下：
antd,react-router-dom，redux-thunk，axios，hook，下面就开始介绍自己的项目了。项目比较简单，只是把架子搭好了，后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/create-antd-gaming，如果有做得错的地方，或者有更好的处理希望各位大佬在下面能评论指正。
首先给大家看看样子
1615090442(1).jpg
没错了，就是仿网易云的模板框的页面，这里有两层路由，和涉及重定向路由的页面，刚开始写的时候还是有点懵的，后面想清楚了，思路就清晰了。
1.路由
下面是第一层的路由
<Switch>
<Route path="/" exact render={()=> <Redirect to="/discover"></Redirect>}></Route>
<Route path="/discover" component={Discover}></Route>
<Route path='/my' component={My}></Route>
<Route path='/friend' component={Friend}></Route>
<Route path='/mall' component={Mall}></Route>
<Route path='/nmusician' component={Nmusician}></Route>
<Route path="*" exact component={Error}></Route>
</Switch>
在discover下又有一层路由
<Switch>
<Route path="/discover" exact render={()=> <Redirect to="/discover/recommend"></Redirect>}></Route>
<Route path='/discover/rank' component={Rank}></Route>
<Route path='/discover/song' component={Song}></Route>
<Route path='/discover/radioStation' component={RadioStation}></Route>
<Route path='/discover/singer' component={Singer}></Route>
<Route path='/discover/disc' component={Disc}></Route>
<Route path='/discover/recommend' component={Recommend}></Route>
</Switch>
2.axios的封装
在src下新建api文件夹，api下有
- request.js文件
import axios from 'axios'
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
baseURL: '这里为你的请求ip',
// withCredentials: true, // 跨域请求时发送 cookies
timeout: 60000, // request timeout
headers: {
'Content-Type': 'application/json'
}
})
// request interceptor
service.interceptors.request.use(
config => {
const NEBULA_TOKEN = user.token()
// Do something before request is sent
if (NEBULA_TOKEN) {
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['Authorization'] = NEBULA_TOKEN
// config.headers['X-Token'] = getToken()
}
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get information such as headers or status
* Please return response => response
*/
// response => response.data,
/**
* 下面的注释为通过在response里，自定义code来标示请求状态
* 当code返回如下情况则说明权限有问题，登出并返回到登录页
* 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
* 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
*/
response => {
const res = response.data
if (parseInt(res.code) === 43004 || parseInt(res.code) === 43005) {
return Promise.reject('error')
} else {
return response.data
}
},
error => {
return Promise.reject(error)
}
)
export default service
- index.js文件
import request from "./request";
export function defaultGed() {
return request({
url: "/default/ged",
method: "get"
});
}
export function defaultGed(data) {
return request({
url: "/default/geds",
method: "post",
data: data
});
}
然后在页面上引入/api/index.js文件
在useEffect下请求接口
useEffect(() => {
defaultGed().then(res => {})
}, [])
这样就可以拿到请求后的数据了.
3.redux的使用
在src下新建一个redux文件夹
redux下新建
- actions.js
export const change_user_info = "changeUserInfo"
export function changeUserInfo(data) {
return {
type: change_user_info,
data: data
}
}
- reducer.js
import { change_user_info } from './actions'
export default {
userInfo(state = null, action) {
const { type, data } = action;
switch (type) {
case change_user_info:
return data;
default:
}
return state;
},
}
- store.js
import { createStore, combineReducers, applyMiddleware } from 'redux'
import reducers from './reducer'
import thunk from 'redux-thunk'
const store = createStore(
combineReducers(reducers),
{ userInfo: null },
applyMiddleware(thunk)
)
export default store
在src最外层下的index.js文件引入
//省略
import { Provider } from 'react-redux'
import store from './redux/store'
//省略
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
然后我们在某个页面上使用
import React from 'react';
import { connect } from 'react-redux'
import { changeUserInfo } from '../../redux/actions'
import { Button } from 'antd'
import { withRouter } from 'react-router-dom'
const mapStateToProps = (state) => {
return {
userInfo: state.userInfo,
}
}
function Friend(props) {
const { userInfo, dispatch } = props
return (
<div>
<Button onClick={() => dispatch(changeUserInfo('token'))}>朋友</Button>
<div>{userInfo}</div>
</div>
)
}
export default connect(mapStateToProps)(withRouter(Friend))
在其他页面上也可以通过props拿到userInfo做到全局。
好了，demo就介绍到这里吧，该项目刚开始，也是我这react小白的项目，因为页面框架已经搭好了，剩下的就是分别在每个页面画画了，后面会继续完善。
