git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start

yarn build

 +node_modules -src  +asset  +Layout  +pages  +redux  +utils  +app.js  +index.html  +index.js .babelrc  package.json  postcss.config.js webpack.config.js //webpack 配置

 // webpack.config.js 配置 module: {  rules: [   {    test: //.bundle/.js$/,    use: {     loader: 'bundle-loader',     options: {      name: '[name]',      lazy: true     }    }   }  ] } // 頁面引入組件 import Home from "bundle-loader?lazy&name=[name]!./Home"; // 組件使用 因為組件懶加載 是通過異步的形式引入 所以不能再頁面直接以標簽的形式使用 需要做使用封裝  import React, {Component} from 'react' import { withRouter } from 'react-router-dom' class LazyLoad extends Component {  state = {   LoadOver: null  }  componentWillMount() {   this.props.Loading(c => {    this.setState({     LoadOver: withRouter(c.default)    })   })  }   render() {   let {LoadOver} = this.state;   return (    LoadOver ? <LoadOver/> : <div>加載動畫</div>   )  } } export default LazyLoad // 通過封裝的懶加載組件過度 增加加載動畫 <LazyLoad Loading={Home} />

 // 通過require.context讀取模塊下路由文件 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"; export default [  {   path: '/user',   component: User  },  {   path: '/user/:id',   component: User  } ]

 // ---------創建 -------- // 為了不免action、reducer 在不同文件 來回切換 對象的形式創建 // createReducer 將書寫格式創建成rudex認識的reducer export function createReducer({state: initState, reducer}) {  return (state = initState, action) => {   return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state  } } // 創建頁面級別的store const User_Info_fetch_Memo = 'User_Info_fetch_Memo' const store = {  // 初始化數據  state: {   memo: 9,   test: 0  },  action: {   async fetchMemo (params) {    return {     type: User_Info_fetch_Memo,     callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},     payload: params    }   },   ...  },  reducer: {   [User_Info_fetch_Memo] (prevState = {}, {payload}) {    console.log('reducer--->',payload)    return {     ...prevState,     memo: payload.memo    }   },   ...  } } export default createReducer(store) export const action = store.action // 最終在模塊界別組合 [當然模塊也有公共的數據(見Home模塊下的demo寫法)] import {combineReducers} from 'redux' import info from './Info/store' export default combineReducers({  info,  。。。 }) // 最終rudex文件夾下的store.js 會去取所有模塊下的store.js 組成一個大的store也就是我們最終倉庫 // --------使用------ // 首先在app.js中將store和app關聯 import { createStore } from 'redux' import { Provider } from 'react-redux' // reducer即我們最終 import reducer from './redux/store.js' // 用戶異步action的中間件 import middleware from './utils/middleware.js' let store = createStore(reducer, middleware) <Provider store={store}>  。。。 </Provider> // 然后組件調用 只需要在組件導出時候 使用connent鏈接即可 import React, {Component} from 'react' import {connect} from 'react-redux' // 從頁面級別的store中導出action import {action} from './store' class Demo extends Component {  const handle = () => {   // 觸發action   this.props.dispatch(action.fetchMemo({}))  }  render () {   console.log(this.props.test)   return <div onClick={this.handle}>ss</div>  } } export default connect(state => ({  test: state.user.memo.test }) )(demo) 

 // 與其說redux中間件不如說action中間件 // 中間件執行時機 即每個action觸發之前執行 //  import { applyMiddleware } from 'redux' import fetchProxy from './fetchProxy'; // 中間件 是三個嵌套的函數 第一個入參為整個store 第二個為store.dispatch 第三個為本次觸發的action  // 簡單封裝的中間件 沒有對請求失敗做過多處理 目的在與項錯誤處理機制給到頁面處理 const middleware = ({getState}) => next => async action => {  // 此時的aciton還沒有被執行   const {type, callAPI, payload} = await action  // 沒有異步請求直接返回action  if (!callAPI) return next({type, payload})  // 請求數據  const res = await fetchProxy(callAPI)  // 請求數據失敗 提示  if (res.status !== 200) return console.log('網絡錯誤！')  // 請求成功 返回data  return next({type, payload: res.data}) } export default applyMiddleware(middleware)