Scaffolding homemade React

Source Address

Source

running result

Feature

1. No need to repeat the definition of action, such as waiting for Action, successful Actoin, failure Action. Write less action, do more things.

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

2. Custom Middleware, help Action to complete the asynchronous operation.

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 for introducing immutable, more concise, persistent data structures.

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. Exact match navigation route, comprising an input url, js jump.

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;
}
复制代码

surroundings

npm ^6.5.0
node ^11.4.0
复制代码

start up

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

$ cd react-scaffolding

$ npm install

$ npm start
复制代码

deploy

$ npm run build
复制代码

Directory Structure

. 
├── public 
│ └── index.html 
├── the src # primary inlet 
│ ├── actions # action layer 
│ │ └── table.js 
│ ├── page sharing component # Components 
│ │ ├── AsyncComponent 
└── index.jsx │ │ │ 
│ │ ├── LayoutHeader 
│ │ │ ├── index.jsx 
│ │ │ └── index.less 
│ │ └── LayoutSider 
│ │ ├── index.jsx 
│ │ └ index.less - the 
│ ├── index.jsx primary inlet file # JS 
│ layer ├── pages page # 
│ │ ├── the Chart 
│ │ │ ├── index.jsx 
│ │ │ └── index.less 
│ │ ├── Home
│ │ │ ├── components # page separate component layers 
│ │ │ │ └── menu.jsx 
│ │ │ ├── index.jsx 
│ │ │ └── index.less 
│ │ └── the Table 
│ │ ├ index.jsx - the 
│ │ └── index.less 
│ the reducer # ├── the reducers layer 
│ │ ├── rootReducers.js 
│ │ └── table.js 
│ ├── request.jsx # network layer 
│ ├─ ─ routeConfig.jsx # routing layer 
│ └── servers # Interface layer 
│ └── table.js 
├── utils # tools 
├── webpack.base.conf.js # webpack common configuration  
├── webpack.dev. js # webpack development
├── webpack.prod. js # webpack production

To be continued

1. Configuration eslint
2. The introduction of ts
3. unit test

Welcome attention to my blog

Blog

Reproduced in: https: //juejin.im/post/5cfc7d7551882520724c8a6b