React Hook实战项目（含axios封装，双层路由的使用，redux的使用）

好久没写文章了，今天就来介绍下最近写的react hook的练手项目，用到相关的技术有以下：

antd,react-router-dom，redux-thunk，axios，hook，下面就开始介绍自己的项目了。项目比较简单，只是把架子搭好了，后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/create-antd-gaming，如果有做得错的地方，或者有更好的处理希望各位大佬在下面能评论指正。

首先给大家看看样子

1615090442(1).jpg

没错了，就是仿网易云的模板框的页面，这里有两层路由，和涉及重定向路由的页面，刚开始写的时候还是有点懵的，后面想清楚了，思路就清晰了。
1.路由
下面是第一层的路由

1<Switch>
2            <Route path="/" exact render={()=> <Redirect to="/discover"></Redirect>}></Route>
3            <Route path="/discover" component={Discover}></Route>
4            <Route path='/my' component={My}></Route>
5            <Route path='/friend' component={Friend}></Route>
6            <Route path='/mall' component={Mall}></Route>
7            <Route path='/nmusician' component={Nmusician}></Route>
8            <Route path="*" exact component={Error}></Route>
9 </Switch> 

在discover下又有一层路由

1<Switch>
2            <Route path="/discover" exact render={()=> <Redirect to="/discover/recommend"></Redirect>}></Route>
3            <Route path='/discover/rank' component={Rank}></Route>
4            <Route path='/discover/song' component={Song}></Route>
5            <Route path='/discover/radioStation' component={RadioStation}></Route>
6            <Route path='/discover/singer' component={Singer}></Route>
7            <Route path='/discover/disc' component={Disc}></Route>
8            <Route path='/discover/recommend' component={Recommend}></Route>
9</Switch> 

2.axios的封装
在src下新建api文件夹，api下有

• request.js文件

1import axios from 'axios'
2// create an axios instance
3const service = axios.create({
4  //   baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
5  baseURL: '这里为你的请求ip',
6  // withCredentials: true, // 跨域请求时发送 cookies
7  timeout: 60000, // request timeout
8  headers: {
9    'Content-Type': 'application/json'
10  }
11})
12
13// request interceptor
14service.interceptors.request.use(
15  config => {
16    const NEBULA_TOKEN = user.token()
17    // Do something before request is sent
18    if (NEBULA_TOKEN) {
19      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
20      config.headers['Authorization'] = NEBULA_TOKEN
21      // config.headers['X-Token'] = getToken()
22    }
23    return config
24  },
25  error => {
26    // Do something with request error
27    Promise.reject(error)
28  }
29)
30
31// response interceptor
32service.interceptors.response.use(
33  /**
34   * If you want to get information such as headers or status
35   * Please return  response => response
36   */
37  // response => response.data,
38  /**
39   * 下面的注释为通过在response里，自定义code来标示请求状态
40   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
41   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
42   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
43   */
44  response => {
45    const res = response.data
46    if (parseInt(res.code) === 43004 || parseInt(res.code) === 43005) {
47      return Promise.reject('error')
48    } else {
49      return response.data
50    }
51  },
52  error => {
53    return Promise.reject(error)
54  }
55)
56
57export default service 

• index.js文件

1import request from "./request";
2export function defaultGed() {
3  return request({
4    url: "/default/ged",
5    method: "get"
6  });
7}
8export function defaultGed(data) {
9  return request({
10    url: "/default/geds",
11    method: "post",
12    data: data
13  });
14} 

然后在页面上引入/api/index.js文件
在useEffect下请求接口

1useEffect(() => {
2    defaultGed().then(res => {})
3  }, []) 

这样就可以拿到请求后的数据了.
3.redux的使用
在src下新建一个redux文件夹
redux下新建

• actions.js

1export const change_user_info = "changeUserInfo"
2
3export function changeUserInfo(data) {
4    return {
5        type: change_user_info,
6        data: data
7    }
8} 

• reducer.js

1import { change_user_info } from './actions'
2export default {
3    userInfo(state = null, action) {
4        const { type, data } = action;
5        switch (type) {
6            case change_user_info:
7                return data;
8            default:
9        }
10        return state;
11    },
12} 

• store.js

1import { createStore, combineReducers, applyMiddleware } from 'redux'
2import reducers from './reducer'
3import thunk from 'redux-thunk'
4
5const store = createStore(
6  combineReducers(reducers),
7  { userInfo: null },
8  applyMiddleware(thunk)
9)
10export default store 

在src最外层下的index.js文件引入

1//省略
2import { Provider } from 'react-redux'
3import store from './redux/store'
4//省略
5ReactDOM.render(
6  <Provider store={store}>
7    <App />
8  </Provider>,
9  document.getElementById('root')
10); 

然后我们在某个页面上使用

1import React from 'react';
2import { connect } from 'react-redux'
3import { changeUserInfo } from '../../redux/actions'
4import { Button } from 'antd'
5import { withRouter } from 'react-router-dom'
6
7const mapStateToProps = (state) => {
8    return {
9        userInfo: state.userInfo,
10    }
11}
12
13function Friend(props) {
14    const { userInfo, dispatch } = props
15    return (
16        <div>
17            <Button onClick={() => dispatch(changeUserInfo('token'))}>朋友</Button>
18            <div>{userInfo}</div>
19        </div>
20
21    )
22}
23export default connect(mapStateToProps)(withRouter(Friend)) 

在其他页面上也可以通过props拿到userInfo做到全局。
好了，demo就介绍到这里吧，该项目刚开始，也是我这react小白的项目，因为页面框架已经搭好了，剩下的就是分别在每个页面画画了，后面会继续完善。

本文转自 https://www.jianshu.com/p/7032512b811a，如有侵权，请联系删除。