介绍
框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载
手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解
启动
打包
yarn build
目录结构
bundle-loader 懒加载使用
import Home from "bundle-loader?lazy&name=[name]!./Home";
import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
class LazyLoad extends Component {
this.props.Loading(c => {
LoadOver: withRouter(c.default)
let {LoadOver} = this.state;
LoadOver ? <LoadOver/> : <div>加载动画</div>
<LazyLoad Loading={Home} />
路由配置
框架按照模块划分,pages文件夹下具有route.js 即为一个模块
const files = require.context('./pages', true, /route\.js$/)
let routers = files.keys().reduce((routers, route) => {
let router = files(route).default
return routers.concat(router)
import User from "bundle-loader?lazy&name=[name]!./User";
redux 使用介绍
export function createReducer({state: initState, reducer}) {
return (state = initState, action) => {
return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state
const User_Info_fetch_Memo = 'User_Info_fetch_Memo'
async fetchMemo (params) {
type: User_Info_fetch_Memo,
callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},
[User_Info_fetch_Memo] (prevState = {}, {payload}) {
console.log('reducer--->',payload)
export default createReducer(store)
export const action = store.action
import {combineReducers} from 'redux'
import info from './Info/store'
export default combineReducers({
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './redux/store.js'
import middleware from './utils/middleware.js'
let store = createStore(reducer, middleware)
// 然后组件调用 只需要在组件导出时候 使用connent链接即可
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {action} from './store'
class Demo extends Component {
this.props.dispatch(action.fetchMemo({}))
console.log(this.props.test)
return <div onClick={this.handle}>ss</div>
export default connect(state => ({
test: state.user.memo.test
关于redux中间件
import { applyMiddleware } from 'redux'
import fetchProxy from './fetchProxy';
const middleware = ({getState}) => next => async action => {
const {type, callAPI, payload} = await action
if (!callAPI) return next({type, payload})
const res = await fetchProxy(callAPI)
if (res.status !== 200) return console.log('网络错误!')
return next({type, payload: res.data})
export default applyMiddleware(middleware)