搭建一套好用的react项目架构

项目目录

image

组织架构

react16.x、react.hooks、react.lazy组件懒加载、react-router4.x 、redux、sass

使用官方脚手架创建项目

• 1、安装装官方脚手架 create-react-app

$ npm install create-react-app -g 
# or
$ yarn add global create-react-app  

• 2、初始化react项目

# 创建
$ create-react-app myproject

#启动
$ cd myproject
$ yarn start # or npm start

路由

1、路由抽离成配置文件

2、路由组件懒加载

src/router.js

import React from 'react'

const Home = React.lazy(()=>import(/*webpackchunkname:Home*/'@/pages/Home' ))
const Dashboard = React.lazy(()=>import(/*webpackchunkname:Home*/'@/pages/Dashboard' ))

export default [
    {
        path:'/',
        exact:true,
        component:Home
    },
    {
        path:'/dashboard',
        component:Dashboard
    }
]

每个路由配置都是一个对象，包含path、exact、（component|render|children）属性，从app.jsx中可以知道，路由配置对象就是route的属性列表。

路由组件则采用react提供的react.lazy方法进行路由懒加载，降低首屏渲染的时间，react.lazy需要和Suspense组件配套使用,如下，用Suspense组件包裹根组件，fallback是过渡组件，必传

src/app.jsx

import React, { Suspense } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import routes from '@/router'
import "./assets/scss/global.scss";

function App() {
  return (
    <Suspense fallback={<div></div>}>
      <BrowserRouter>
        {
        //遍历配置文件，生成路由列表
          routes.map((route)=>{
            return (
            //路由配置中的全部属性作为Route的属性
              <Route {...route} />
            )
          })
        }
      </BrowserRouter>
    </Suspense>
  );
}

export default App;

redux状态管理-使用

项目中将redux按照页面模块拆分，即每个页面一个reducer，这样结构更加清晰便于维护

拿list组件为例（src/pages/List）,每个页面组件由3个文件组成，index.jsx、index.scss、model.js(可以没有)

先介绍怎么用，后面介绍实现方发

model.js

export default {
    namespace:'List',
    initState:{
        homeMsg:'hello list'
    },
    promise:{
        getAjaxData(){
            return async dispatch =>{
                await ftech('http://test.cn/api')
            }
        }
    },
    actions:{
        changeListMsg(state,listMsg){
            return {
                ...state,
                homeMsg:stMsg
            }
        }
    }
}

可以看到每个model由四部分组成：

• namespaced:redux模块名，一般以页面名称命名
• initState：初始的state值
• promise：异步action
• actions：普通action

同步action返回的是最终的state，这个会在封装的connect函数中处理成标准的action，后面会说到

定义好model之后，在组件中使用

src/pages/List/index.jsx

import React from "react";
import connect from "@/store/connect";  //connect方法基于react-redux二次封装，后面会说
import model from "./model";

import { Button } from "antd";

const List = function(props) {
  const { listMsg, changeListMsg } = props; 
  return (
    <div>
      <p>listMsg：{listMsg}</p>
      <Button
        onClick={() => {
          changeListMsg("改变后的listMsg");
        }}
      >
        改变listMsg
      </Button>
    </div>
  );
};

export default connect(model)(List);

如上，在使用封装的connect传入model将List组件包装之后，就可以直接带props里面获取到该model下面的state和同、异步action并直接在组件中使用

有时候可能会遇到需要跨模块访问的问题，例如在List组件中要使用Home组件的model

src/pages/Home/model

export default {
    namespace:'Home',
    initState:{
        homeMsg:'hello home'
    },
    promise:{
        getAjaxData(){
            return async dispatch =>{
                await sleep(3000)
            }
        }
    },
    actions:{
        changeHomeMsg(state,homeMsg){
            return {
                ...state,
                homeMsg:homeMsg
            }
        }
    }
}

这时候只需要把Home的model传入即可

import React from "react";
import connect from "@/store/connect";  //connect方法基于react-redux二次封装，后面会说
import ListModel from "./model";
import HomeModel from "../Home/model";

import { Button } from "antd";

const List = function(props) {
  const { Home,List changeListMsg } = props; 
  return (
    <div>
      <p>listMsg：{List.listMsg}</p>
      <p>HomeMsg：{Home.homeMsg}</p>
      <Button
        onClick={() => {
          changeListMsg("改变后的listMsg");
        }}
      >
        改变listMsg
      </Button>
      <Button
        onClick={() => {
          changeHomeMsg("改变后的homeMsg");
        }}
      >
        改变homeMsg
      </Button>
    </div>
  );
};

export default connect([ListModel,HomeModel])(List);

需要注意的是，当mode传入多个的时候，connect会将每个model下面的state分别放在一个对象中，对象名就是model的namespace,但是action和promise是都打平到props中的，所以如同一个组件用到了多个模块，保证这些模块的action、promise的名字相互不重复

redux状态管理-封装

1、因为是对store进行模块拆分的，第一步我们需要先将全部的模块合并成一个集合，这里采用了遍历引入的方法，避免重复的去写引用的代码

src/store/model.js

//modelMap是所有模块的映射，
//可以是模块名字符串，也可以是数组
//当模块（也就是model的路径）路径是src/page/xxx/model.js的时候，可以直接传模块名
//当需要指定模块路劲的时候，传入第二个参数就是模块路径
const modelMap = [
    'Home',
    ['List','src/pages/List/index']
]

const models = []
modelMap.forEach(model=>{
    if(Array.isArray(model)){
        models.push(require(`@/${model[1]}`).default)
    }else{
        models.push(require(`@/pages/${model}/model`).default)
    }
})

//models为所有的model集合

export default models

2、合并好model之后我们需要创建reducers，将创建好的models遍历创建应用的reducers

src/store/index.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "@/store/middleware/thunkMiddle";
import logger from "redux-logger";

import models from "./model";

//这里实际上是根据models手动实现了combineReducers类似的功能
const reducers = (state = {}, acts) => {
  const result = {};
  models.forEach(({ namespace, initState, promise, actions }) => {
    result[namespace] = ((innerState, innerAction) => {
      // type名称为 namespace/action，例如：Order/add
      const [modeName, type] = innerAction.type.split("/");
      if (namespace !== modeName) return innerState;

      // 有指定的action的情况
      if (actions[type]) return actions[type](innerState, innerAction.payload);

      // 如果type名称是以Up结尾，则创建修改对应state的action
      if (/^(\w+)Up$/.test(type) && innerState[RegExp.$1] !== undefined) {
        return {
          ...innerAction,
          [RegExp.$1]: innerAction.payload
        };
      }
      //中间件自己触发的action（不在action列表中）将state和payload合并
      return {...innerState,...innerAction.payload}
    })(state[namespace] || initState, acts);
  });
    //result最终的结构是
    //{
    // modelA:{...modelaState},
    // modelB:{...modelbState}
    //}  
    //与combineReducers生成方法的返回值结构一致
  return result;
};

//开发环境对谷歌插件react-devtool的支持
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//只有在开发环境的时候才启用谷歌插件react-devtool
const store =
  process.env.NODE_ENV === "production"
    ? createStore(reducers, applyMiddleware(thunk,logger))
    : createStore(
        reducers,
        composeEnhancers(applyMiddleware(thunk,logger))
      );

export default store;

3、生成redux标准的action

就每个model下面的actions和promise来说，都不属于redux能识别的action，所以我们需要根据每个模块的model来生成对应的action，因为每个用到redux的组件都会调用connect，那最好的实现地方就是在connect方法中

src/store/connect.js

import { connect } from "react-redux";

/**
 * @param {Object | Array<Object>} model store模块对象或者模块对象列表
 * @param {[String]} namespace 指定namespace，只有当model是数组的的时候才可能传改参数，作用是将指定的model下的state打散合并到props中，也可以不传，那么state将以模块名分类合并到props
 */
export default (model, namespace) => {
  const acts = {};
  let resnameSpace = namespace || null
  if (Array.isArray(model)) {
    model.forEach(MapActions);
  } else {
    resnameSpace = model.namespace
    MapActions(model);
  }
  function MapActions(curModel) {
    const { namespace, promise=[], actions=[] } = curModel;
    //将model.actions转化成redux能识别的同步action
    Object.keys(actions).forEach(acName => {
      acts[acName] = payload => ({
        type: `${namespace}/${acName}`,
        payload
      });
    });

    // 异步action
    promise &&
      Object.keys(promise).forEach(name => {
        // acts[name] = promise[name]//(...params) => promise[name](...params);
        acts[name] = ()=>{
          //异步action都自动添加一个loadingName，用于自动生成loading状态
          //为了后续写对应的redux中间件做铺垫
          let a = promise[name]()
          a.namespace = namespace
          a.loadingName = name
          return a
        }
      });
  }
  return connect(
    state => resnameSpace?state[resnameSpace]:state,
    acts
  );
};

4、redux中间件

前面只是对普通的actions做了相应的处理，异步actions没有做处理，所以我们需要编写一个redux中间件来处理异步action,该中间件主要实现两个功能

• 1、增强dispatch对函数action的支持，从而能实现异步操作
• 2、在异步action将要执行和执行完毕之后都添加对应的状态，状态名为${actionname}LoadingState,用于做页面局部的loading样式展现

src/store/middleware/thunkMiddle.js

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => async action => {
    //扩展dispatch方法
    //当actionType传string时，格式应该为 `${namespace}/${actionname}`
    //当actionType传对象是，格式为标准的action格式{type:action-type,payload:payload-data}
    let dispatchPlus = (actionType, payload) => {
      if (typeof actionType === "string") {
        dispatch({
          type: actionType,
          payload
        });
      } else {
        dispatch(actionType);
      }
    };
    if (typeof action === "function") {

      //为每一个异步action自动注入一个loadingState状态，状态名字为`${actionname}LoadingState`
      //当异步action开始执行的时候，loadingState状态将设置为1，表示异步操作正在loading
      //当一部action执行完毕之后，loadingState将设置为2，表示异步操作已经结束
      //可用于做局部或者页面的loading状态
      function createLoadStateAction(action,loadState){
        return {
          type:`${action.namespace}/${action.loadingName}Loading`,
          payload:{
            [`${action.loadingName}LoadingState`]:loadState,
          }
        }
      }
      dispatch(createLoadStateAction(action,1))
      let reutrns = await action(dispatchPlus, getState, extraArgument);
      dispatch(createLoadStateAction(action,2))
      return reutrns
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

5、项目根组件注入store

万事具备之后，我们只需要将store注入到应用就可以正常使用了

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import store from '@/store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

未完 --