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.路由
下面是第一层的路由

<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小白的项目，因为页面框架已经搭好了，剩下的就是分别在每个页面画画了，后面会继续完善。

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