Next.js踩坑入门系列（六） —— 再次重构目录

时间 2019-11-06

原文原文链接

Next.js踩坑入门系列

上一节引入了redux以及使用redux-saga来进行异步函数的处理，而上一节的目录只是简单的引入redux而已，redux但是至关庞大和复杂的，而且也算是我的习惯了吧。action分离，reducer分离，状态组件container等等。我喜欢把这些东西划分的清清楚楚，这样一个项目维护起来才会方便～这一节就从头至尾来进行目录的划分，由于Next.js和本来的React SPA项目有必定的区别，主要体如今路由部分，因此我也是按照本身的理解和舒服的方式进行目录重构！react

重构完的目录

// ================ 目录结构 ================== //
——————
  | -- asserts         // ant-design全局less变量设置文件夹
  | -- components      // React展现组件(也就是UI组件)文件夹
  | -- constants       // 整个应用的常量文件夹
      | -- ActionsTypes.js   // 存放全部action type的常量文件
      | -- ApiUrlForBE.js    // 存放全部后端数据的apiUrl
      | -- ...
  | -- containers      // React状态组件文件夹
  | -- pages           // Next.js路由文件夹
  | -- redux
      | -- actions     // 处理整个应用全部的action
      | -- middlewares // 中间件，处理各类特殊状况，好比获取失败以后的message提醒
      | -- reducers    // 处理整个应用全部的reducer
      | -- sagas       // 处理整个应用全部的saga
      | -- store.js  
  | -- static          // 存放整个应用全部的静态资源(如图片等)
  | -- .babelrc
  | -- .eslintrc
  | -- .gitignore
  | -- next.config.js  // Next.js配置文件
  | -- package.json   
  | -- server.js       // 服务端server文件
  | ...
复制代码

原谅我臭不要脸一下，我的认为这个结构仍是很是清晰的，只不过可能新手写起来可能会以为有些繁琐，不过项目大的状况下，state树很大，这种结构很是的清晰～git

重构actions

其实actions彻底能够放在一个文件里使用，不过项目庞大了之后维护起来仍是有些麻烦的，因此按照组件化思想，每个组件对应一个action，或者每个大功能块对应一个action仍是比较合理的。github

-- redux
   | -- actions
       |  -- home.js // 处理首页action
       |  -- user.js // 处理与用户有关action
       |  ...        // 其余action
复制代码

重构reducers

reducer部分确定是要分离的，由于redux的官方为咱们提供combineReducer这个API就是合并不一样组件的reducer的，因此能够理解为redux的reducer推荐就是根据组件进行划分的～就如同整个应用只有一个状态树同样，每个reducer负责处理树的不一样枝叶派发出来的action。具体reducer内容仍是去看redux官方文档吧。json

重构sagas

-- redux
   | -- reducers
       |  -- home    // 首页部分reducer
       |  -- user    // 用户相关reducer
       |  ...        // 其余reducer
       | index.js    // rootReducer，由combineReducer生成
复制代码

抽离container

这里须要特别说明一下～～～因为Next.js的特殊缘由，其实已经作到了UI组件的分离，其实这一层container彻底能够由pages文件夹代替，也就是能够用路由组件经过react-redux的connect函数封装一下，这样就变成了一个带状态的路由组件，不知道你们明不明白我说的话。。。下面是两种方法，你们按需本身采起，以UserList组件为例：redux

第一种，抽离container

// /conatiners/user/UserList.js
    import { connect } from 'react-redux';
    import { fetchUserListData } from '../../redux/actions/user';
    import UserList from '../../components/User/UserList';
    
    const mapStateToProps = state => ({
      list: state.user.list.list,
    });
    
    const mapDispatchToProps = dispatch => ({
      fetchUserListData() {
        dispatch(fetchUserListData());
      }
    });
    
    export default connect(mapStateToProps, mapDispatchToProps)(UserList);

    // pages/user/userList.js
    import UserList from '../../containers/user/UserList';
    import { fetchUserListData } from '../../redux/actions/user';
    // 这部份内容下一章节讲～
    UserList.getInitialProps = async (props) => {
      const { store, isServer } = props.ctx;
      if (store.getState().user.list.list.length === 0) {
        store.dispatch(fetchUserListData());
      }
      return { isServer };
    };
    
    export default UserList;
复制代码

简单来讲其实就是路由组件导入的是状态组建UserList.js，而状态组建是经过react-redux的connect方法封装UI组件UserList.js而得来的。后端

第二种，带状态的路由组件

// /pages/user/userList.js
import { connect } from 'react-redux';
import UserList from '../../containers/user/UserList';
import { fetchUserListData } from '../../redux/actions/user';

UserList.getInitialProps = async (props) => {
  const { store, isServer } = props.ctx;
  if (store.getState().user.list.list.length === 0) {
    store.dispatch(fetchUserListData());
  }
  return { isServer };
};

const mapStateToProps = state => ({
  list: state.user.list.list,
});

const mapDispatchToProps = dispatch => ({
  fetchUserListData() {
    dispatch(fetchUserListData());
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(UserList);
复制代码

简单来讲，就是在路由组件内把UI组件UserList.js经过connect变成了状态组件。api

我的推荐第一种方法，虽然写起来稍微麻烦了一些，可是第二种方法彻底是由于Next.js的特殊性才能实现的，固然，对于Next.js来讲，第二种方式确实更简单一些～bash

结束语

经历了上面几个部分的重构，整个基于Next.js的服务端渲染脚手架基本结构也就成型了。在搭建过程当中仍是遇到了不少坑的，不过也都一点点的踩过去了。但愿对你们有些帮助，我的认为这个结构仍是值得参考一下的～本来到这里就能够结束系列文章了，不过我在使用过程又发现了一些坑，顺便的Next.js还有一些内容我还没碰过，就帮你们都踩一踩，下一节来一个其余内容的大杂烩～babel

代码地址antd