React+TypeScript搭建项目

创建项目,app-name = 项目名称

 yarn create react-app app-name --template typescript

执行完毕控制台输入

cd app-name

然后输入运行命令,等待运行起来,项目基本功能已经初始化完毕了

yarn start

 增加状态管理器

切换镜像源

yarn config set registry https://registry.npm.taobao.org

安装React-Redux作为状态管理器

yarn add react-redux

在src目录中创建reduxs文件夹,并在下面创建actions、reducers、store文件夹 Redux中文文档

在actions文件夹下创建文件actions.ts 用于记录行为来告诉reducers要执行的动作, 创建actionTypes.ts文件用于存放Key

actionTypes.ts

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

actions.ts

import * as type from './actionTypes'
export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

export function addTodo(text: any) {
  return { type: type.ADD_TODO, text }
}
export function toggleTodo(index: any) {
  return { type: type.TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter: any) {
  return { type: type.SET_VISIBILITY_FILTER, filter }
}

在reducers文件夹下创建reducers.ts文件用于执行对应的业务操作,业务逻辑处理

import { combineReducers } from 'redux'
import { VisibilityFilters } from '../actions/actions'
import * as type from '../actions/actionTypes'
const { SHOW_ALL } = VisibilityFilters


const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todos: []
}
function visibilityFilter(state = SHOW_ALL, action: any) {
    switch (action.type) {
        case type.SET_VISIBILITY_FILTER:
            return action.filter
        default:
            return state
    }
}

function todos(state = initialState, action: any) {
    switch (action.type) {
        case type.SET_VISIBILITY_FILTER:
            debugger
            return Object.assign({}, state, {
                visibilityFilter: action.filter
            })
        case type.ADD_TODO:
            debugger
            return Object.assign({}, state, {
                todos: [
                    ...state.todos,
                    {
                        text: action.text,
                        completed: false
                    }
                ]
            })
        default: return state
    }
}
const todoApp = combineReducers({ todos, visibilityFilter })
export default todoApp

store文件夹下创建store.ts文件, Redux 应用只有一个单一的 store

import { createStore } from 'redux'
import todoApp from '../reducers/reducers'
const myStore = createStore(todoApp)
export default myStore

到这一个简单的Redux已经构建完成,现在开始测试调用,在App.tsx文件中测试一下

import React from 'react';
import { Button } from 'antd';
import './App.css';
import myStore from './reduxs/store/stores'
import { addTodo } from './reduxs/actions/actions';

function App() {
  debugger
  console.log(myStore.getState())
  // 监听state变化
  const unsubscribe = myStore.subscribe(() => console.log(myStore.getState()))
  myStore.dispatch(addTodo('Hello Word'))
  debugger
  unsubscribe()
  return (
    <div className="App">
    </div>
  );
}

export default App;

动态路由

创建routers.ts文件用于存放路由地址数据

interface routers {
    title: string;
    path: string;
    component?: any;
    auth?: boolean;
    exact?: boolean;
    params?: object[]
}
const router_list: routers[] = [
    {
        title: '',
        path: '/',
        exact: true,
        component: 'home'
    },
    {
        title: '',
        path: '/login',
        component: 'login'
    },
]
export default router_list

安装 @loadable/component 用于动态加载组件

// 安装
yarn add @loadable/component

yarn add @types/loadable__component

安装 react-router-dom 

yarn add react-router-dom

改写App.tsx文件,配置路由

import React from 'react';
import './App.css';
import './assets/css/alifont/iconfont.css';
import myStore from 'reduxs/store/stores'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import router_list from 'config/routers'
import loadable from "@loadable/component";
function loadComponent(path: string) {
  return loadable(() => import(`pages/${path}`));
}
function App() {
  return (
    <Provider store={myStore}>
      <Router>
        {
          router_list.map((rt, index) => {
            return <Route path={rt.path} component={loadComponent(rt.component)} exact={rt.exact} key={index}></Route>
          })
        }

      </Router>
    </Provider>
  );
}

export default App;

 动态路由 >> https://blog.csdn.net/weixin_34240520/article/details/91465932  、 https://reacttraining.com/react-router/web/guides/code-splitting

Redux >> https://cn.redux.js.org