自制React脚手架

源码地址

源码

运行效果

特点

1. 不需要重复定义action，比如等待Action、成功Actoin、失败Action。写更少的action，完成更多的事。

export const GET_TABLE = 'GET_TABLE';
export function getTable(params) {
    return {
        type: GET_TABLE,
        payload: api.getTable(params)
    };
}
复制代码

2. 自定义中间件，帮助Action完成异步操作。

function middleware({ dispatch }) {
    return next => action => {
        if (!isFSA(action)) {
            return next(action);
        }

        if(isPromise(action.payload)) {
            dispatch({ ...action, payload: { isLoading: true } });
            return action.payload
                .then(result => {
                    result.isLoading = false;
                    dispatch({ ...action, payload: result});
                })
                .catch(error => {
                    result.isLoading = false;
                    dispatch({ ...action, payload: error, error: true})
                });
        }
        return next(action);
    };
}
复制代码

3. 对reducer引入immutable，更简洁，持久化数据结构。

import { fromJS } from 'immutable';
import { createReducer } from 'redux-immutablejs';
import {
    GET_TABLE,
} from './../actions/table';

const initialState = fromJS({
    tableData: {},
});

export default createReducer(initialState, {
    [GET_TABLE]: (state, { payload }) => {
        return state.set('tableData', payload);
    },
});
复制代码

4. 路由完全匹配导航，包含url输入，js跳转。

componentDidMount() {
    const { location: { pathname } } = this.props;
    this.setState({
        selectedKeys: [pathname],
        pathname
    });
}

static getDerivedStateFromProps(props, state) {
    if(props.location.pathname == '/home') {
        return {
            pathname: '/table',
            selectedKeys: ['/table']
        }
    }
    if(props.location.pathname != state.pathname) {
        return {
            pathname: props.location.pathname,
            selectedKeys: [props.location.pathname]
        }
    }
    return state;
}
复制代码

环境

npm ^6.5.0
node ^11.4.0
复制代码

启动

$ git clone https://github.com/xuya227939/react-scaffolding.git

$ cd react-scaffolding

$ npm install

$ npm start
复制代码

部署

$ npm run build
复制代码

目录结构

.
├── public
│   └── index.html
├── src                              # 主入口
│   ├── actions                      # action层
│   │   └── table.js
│   ├── components                   # 页面共享组件
│   │   ├── AsyncComponent
│   │   │   └── index.jsx
│   │   ├── LayoutHeader
│   │   │   ├── index.jsx
│   │   │   └── index.less
│   │   └── LayoutSider
│   │       ├── index.jsx
│   │       └── index.less
│   ├── index.jsx                    # 主入口文件js
│   ├── pages                        # 页面层
│   │   ├── Chart
│   │   │   ├── index.jsx
│   │   │   └── index.less
│   │   ├── Home
│   │   │   ├── components           # 页面独立的组件层
│   │   │   │   └── menu.jsx
│   │   │   ├── index.jsx
│   │   │   └── index.less
│   │   └── Table
│   │       ├── index.jsx
│   │       └── index.less
│   ├── reducers                     # reducer层
│   │   ├── rootReducers.js
│   │   └── table.js
│   ├── request.jsx                  # 网络层
│   ├── routeConfig.jsx              # 路由层
│   └── servers                      # 接口层
│       └── table.js
├── utils                            # 工具类
├── webpack.base.conf.js             # webpack公共配置
├── webpack.dev.js                   # webpack开发
├── webpack.prod.js                  # webpack生产

未完待续

1. 配置eslint
2. 引入ts
3. 单元测试

欢迎关注我的blog

Blog

转载于:https://juejin.im/post/5cfc7d7551882520724c8a6b