react+TypeScript基础配置

一.基础文件结构

 

 二.文件详情

1.store/index.ts

import { applyMiddleware, createStore } from 'redux'
import rootRouter from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk, { ThunkAction } from 'redux-thunk'
import { ChannelAction } from './action/channel'
import { ArtilceAction } from './action/article'
const store = createStore(
  rootRouter,
  composeWithDevTools(applyMiddleware(thunk))
)

// 一劳永逸解决 useSelector 类型问题
console.log(11111, store.getState())
type Fn = typeof store.getState
export type RootState = ReturnType<Fn>

// 解决thunk调用函数时类型问题
export type RootAction = ThunkAction<
  void,
  RootState,
  unknown,
  ChannelAction | ArtilceAction
>
export default store

2.store/action/channel.ts

import axios from 'axios'
import { RootAction } from '..'
import { Channel } from '../reducers/channel'
// 导出给store/index.ts  解决dispatch返回函数类型问题
export type ChannelAction =
  | {
      type: 'INIT_CHANNEL'
      data: Channel[]
    }
  | {
      type: 'SET_CUR_CHANNEL'
      id: number
    }
// 在这个函数后面使用导入进来的RootAction解决返回函数类型的问题
export function getChannel (): RootAction {
  return async (dispatch) => {
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')
    console.log(res)
    dispatch({
      type: 'INIT_CHANNEL',
      data: res.data.data.channels
    })
  }
}

3.reducers/channel.ts

// 解决action类型问题
import { ChannelAction } from '../action/channel'
// 解决data(channelList)类型问题,在store/action/channel.ts中也会用到
export type Channel = { id: number; name: string }
// 解决初始数据类型问题
type ChannelState = {
  curChannelId: number
  channelList: Channel[]
}

const initState: ChannelState = {
  curChannelId: 0, // 当前选中频道id
  channelList: [] // 所有频道信息
}

export default function channel (state = initState, action: ChannelAction) {
  console.log(action, 'channel')
  if (action.type === 'INIT_CHANNEL') {
    return { ...state, channelList: action.data }
  } else if (action.type === 'SET_CUR_CHANNEL') {
    return { ...state, curChannelId: action.id }
  }
  return state
}

4.App.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../store'

function Channel () {
    const channelList = useSelector(
    // 解决state类型问题
    (state: RootState) => state.channel.channelList
    )
    return(xxx)
}

export default Channel

三.类型调用图解