# react18_ts_music

**Repository Path**: cnjs/react18_ts_music

## Basic Information

- **Project Name**: react18_ts_music
- **Description**: 音乐
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-30
- **Last Updated**: 2025-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react 18-music 项目

## 创建项目

creat-react-app project-name  --template typescript

使用typescript 模板

react-app-env.d.ts 类型声明文件

> `<reference types="react-scripts" />` //类型声明文件 集成

## 配置项目

别名配置 @

craco 修改webpack 配置

> npm i @craco/craco -D

ant Design @4.x版本

tsconfig.json 增加baseurl 路径配置

```javascript
 "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
```

prettier

> npm i prettier -D

eslint

> npm i eslint -D

## 样式重置

normalize.css

> npm i normalize.css

## react-router-dom

## 路由懒加载

React.lazy

## redux --  toolKit

> npm i @reduxjs/toolkit react-redux

# 获取store 类型 -- 类型提示

借用typeof 后去store.getState 类型; 使用RetunType  获取最终store 类型

```javascript
type  GetStateType = typeof store.getState
type StateType =ReturnType `<GetStateType>`
```

## 重写useSelector

重写 useSelector 自动推导 state 类型

```typescript
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counter";
import { TypedUseSelectorHook, useSelector,useDispatch } from "react-redux";
const store = configureStore({
	reducer: {
		counter: counterReducer,
	},
});

// store state hook => useAppSelector
type GetStateFnType = typeof store.getState;
export type IRootState = ReturnType<GetStateFnType>;
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector;

// dispatch hook => useAppDispatch
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;

export default store;


```

```typescript
import React, { Suspense } from "react";

import routes from "./router";
import { Link, useRoutes } from "react-router-dom";
import { shallowEqual, useSelector } from "react-redux";
import { useAppSelector } from "./store";
// import { RootState } from "./store";
function App() {
  /*  const { count } = useSelector((state) => {
     return {
       count: state.counter.count
     }
   }, shallowEqual) */
  const { count } = useAppSelector(state => {
    return {
      count: state.counter.count
    }
  }, shallowEqual)
  return (
    <div className="App">
      <div className="nav">
        <Link to="/discover">发现音乐</Link>
        <Link to="/mine">我的音乐</Link>
        <Link to="/focus">关注</Link>
        <Link to="/download">下载客户端</Link>
      </div>
      <h2>计数；{count}</h2>
      <Suspense fallback={<div>loading...</div>}>
        <div className="main">
          {/* 路由 */}
          {useRoutes(routes)}
        </div>
      </Suspense>

    </div>
  );
}

export default App;

```

参考：[react-redux](https://cn.redux.js.org/tutorials/typescript-quick-start)

# Axios 封装 

# 环境变量

.env.production  .env.development