React Hook实战项目(含axios封装,双层路由的使用,redux的使用)

Chase620 等级 1039 0 0

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

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

首先给大家看看样子

React Hook实战项目(含axios封装,双层路由的使用,redux的使用)

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,如有侵权,请联系删除。

收藏
评论区

相关推荐

《彻底掌握redux》之开发一个任务管理平台(上)
前言 redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
React Hook实战项目(含axios封装,双层路由的使用,redux的使用)
好久没写文章了,今天就来介绍下最近写的react hook的练手项目,用到相关的技术有以下: antd,reactrouterdom,reduxthunk,axios,hook,下面就开始介绍自己的项目了。项目比较简单,只是把架子搭好了,后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/createa
Hook API 索引 – React
Hook API 索引_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本页面主要描述 React 中内置的 Hook API。如果你刚开始接触 Hook,那么可能需要先查阅 。你也可以在 章节中获取有用的信息。 基础 Hook
React Hook丨用好这9个钩子,所向披靡
React Hook 指南 什么是 Hook ? Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数,它简洁了组件,有自己的状态管理,生命周期管理,状态共享。 useState useEffect useContext us
React Hook
用React Hook写一个简单的登录表单示例,两种方式: 第一种: import React, { useState } from "react"; import ReactDOM from "react-dom"; function LoginForm() { const [username, setUsern
React 系列教程2:编写兰顿蚂蚁演示程序
简介 -- 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西。因无意中看到[生命游戏](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fthepeted%2Fgame-of-life-redux)的 React 实现,所以希望通过兰顿蚂蚁的
React实战之React+Redux实现一个天气预报小项目
![](https://oscimg.oschina.net/oscnet/355a9b3e0af9e3410d9cf918fdfe69b2379.jpg)**引言** ------------------------------------------------------------------------------------ 经过一段时间的Re
React技术栈实现XX点评电商App
> 项目地址:[https://github.com/Nealyang/React-Fullstack-Dianping-Demo](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNealyang%2FReact-Fullstack-Dianping-Demo)
React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了😁 * React组件生命周期 * 受控组件与非受控组件 * 多个输入的解决方法 * Props.children可以传递任何数据包括函数 * 布尔值、Null 和 Undefined 被忽略 * 使用 PropTypes 进行类型检查(直接参考官方文档) * react-redux
Redux入门实战——todo
1.前言 ==== 在之前的博客中,我写了一篇关于todo-list实现的博客,一步一步详细的记录了如何使用基础的React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观的认识和粗浅的理解。 近期,个人学习了一下Redux,又将该项目使用 React+Redux的方式进行了实现。本片内容记录以下实践的过程。通过本实例,
Redux异步解决方案之Redux
前段时间,我们写了一篇[Redux源码分析的文章](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fjuejin.im%2Fpost%2F6845166891682512909),也[分析了跟`React`连接的库`React-Redux`的源码实现](https://www.oschina
taro 知识点
* taro 的包: 包名 说明 @tarojs/redux Redux for Taro @tarojs/redux-h5 Forked react-redux for taro @tarojs/plugin-csso Taro压缩CSS文件 ### 内置环境变量 `process.env.TARO_ENV`用于判断当前编译类型,目