React redux和react-router安装使用和常规项目结构搭建

最新推荐文章于 2024-05-24 14:32:05 发布

答案—answer

最新推荐文章于 2024-05-24 14:32:05 发布

阅读量740

点赞数 2

分类专栏： React 文章标签： React 项目结构搭建 redux react-router

本文链接：https://blog.csdn.net/weixin_43835425/article/details/103100204

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装

全局安装脚手架：
npm install -g create-react-app
创建新项目：
create-react-app my-app
安装react-app-rewired
yarn add react-app-rewired@2.0.2-next.0 babel-plugin-import
将package.json中的script启动方式替换为rewired
"scripts": {
“start”: "react-app-rewired start“
}
安装ant Ui插件
yarn create react-app antd-demo
安装react-router 路由:
npm i react-router-dom
安装: redux
yarn add redux react-redux 或者 npm i redux react-redux
安装: redux-logger redux-thunk
yarn add redux-thunk react-logger（redux中间件）

项目搭建

新建 config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config,env){  //antd 按需加载
  config = injectBabelPlugin([
  //引入模块：antd , 文件夹名：es，包含：css
  'import',{libraryName:'antd-mobile',libraryDirectory:'es',style:'css'}],config)
   //添加装饰器能力
  config = injectBabelPlugin(
     ['@babel/plugin-proposal-decorators',{legacy:true}],config
  )
 return config;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'lib-flexible' 
import './assets/font_74bntjvs7d9/iconfont.css' // 字体文件
import App from './App';
import * as serviceWorker from './serviceWorker';
import './index.css';
import {Provider} from 'react-redux'
import reducer from './store'
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
const store = createStore(reducer,applyMiddleware(thunk,logger))
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));

serviceWorker.unregister();

index.html

<!DOCTYPE html>
<html>
<head>
  <!-- set `maximum-scale` for some compatibility issues -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> -->
  <meta name="description" content="QQ音乐是腾讯公司推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、空间背景音乐设置、MV观看等，是互联网音乐播放和下载的优选。">
  <meta name="keywords" content="音乐,音乐网站,mp3下载,音乐下载,在线听歌,正版音乐,歌词,歌词翻译,MV,新歌热歌,经典老歌,音乐排行榜,空间背景音乐,播放器,高品质音乐,无损音乐,电台,专辑,歌单,歌手">
  <link rel="shortcut icon" href="//y.qq.com/favicon.ico?max_age=2592000">
  <!-- 是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏  -->
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <!-- 开启对web app程序的支持  -->
  <meta content="yes" name="apple-touch-fullscreen" />
  <!-- 忽略识别手机号码和邮箱 -->
  <meta content="telephone=no,email=no" name="format-detection">
  <title>QQ音乐 - 千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

redux

在src下新建store文件夹
在这里插入图片描述
index.js

import {combineReducers} from 'redux'
import player from './player.redux'
import rank from './rank.redux'
import recommend from './recommend.redux'
import search from './search.redux'
import songList from './songList.redux'
export default combineReducers({player,rank,recommend,search,songList})

player.redux.js

 基本结构
export default(state,action)=>{
  state = state || {}
   switch(action.type){
      case 'send':
      retun{...state,data:action.data}
      default:
      return state
  }
}

rank.redux.js

import * as api from '../api'
export default (state,action)=>{
    state = state || {}
    switch(action.type){
        case 'RANK_INIT':
        return {data:action.data}
        default:
        return state
    }
}

//异步请求方法
export const rank =()=>(dispatch)=>{
   fetch(aip.TOP_LIST).then(res=>res.json()).then(req=>{
     dispatch({type:"RANK_INIT",data:req.data})
  })
}

Rank.jsx

import React from 'react';
import {connect} from 'react-redux'; // redux 装饰器
import {rank} from '../../store/rank.redux'
 
 @connect(
  (state)=>({
   data:state.rank.data
  }),
  {
  rank
  }
)

 class Rank  extends React.Component{
    constructor(props){
     super(props)
    }
    componentDidMount(){
      this.props.rank()
    }
}

export default Rank;

react-router使用
app.js

import React from 'react';
import { BrowserRouter as Router, Route,Redirect,Switch } from 'react-router-dom'
import Home from './components/Home'
import SongList from './components/SongList'
import Player from './components/Player'
import './App.css';

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/songList/:id" component={SongList}></Route>
          <Route path="/player/:songMid/:songId" component={Player}></Route>
          <Route path="/" component={Home}></Route>
        </Switch>
      </Router>
    );
  }
}

export default App;

home.jsx

import React from 'react';
import {NavLink,Route,Redirect,Switch} from 'react-router-dom'
import Recommend from '../Recommend'
import Rank from '../Rank'
import Search from '../Search'
import './index.css';
 class App extends React.Component {
   render(){
    return (
        <div>
                 	/* <!-- 导航区 --> */
           <NavLink to="/recommend">推荐</NavLink>
            <NavLink to="/rank">排行榜</NavLink>
            <NavLink to="/search">搜索</NavLink>
             <Switch>
            <Route exact path="/recommend" component={Recommend}></Route>
            <Route path="/rank" component={Rank}></Route>
            <Route path="/search" component={Search}></Route>
            <Redirect to="/recommend"/>
          </Switch>
         </div>
       )
    }
}

答案—answer

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React redux和react-router安装使用和常规项目结构搭建

安装全局安装脚手架：npm install -g create-react-app创建新项目：create-react-app my-app安装react-app-rewiredyarn add react-app-rewired@2.0.2-next.0 babel-plugin-import将package.json中的script启动方式替换为rewired"sc...
复制链接

扫一扫

专栏目录