足場自家製が反応します

送信元アドレス

ソース

業績

機能

1. こうしたアクション、成功Actoin、障害アクションを待っているように、アクションの定義を繰り返す必要はありません。以下のアクションを書く、より多くのことを行います。

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

2. カスタムミドルウェアは、アクションが非同期操作を完了するのに役立ちます。

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. 不変の、より簡潔な、永続的なデータ構造を導入するための減速機。

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

ディレクトリ構造

。
├──公共
│└──index.htmlを
├──のsrc＃一次入口
│├──アクション＃アクション層
││└──table.js 
│├──ページ共有コンポーネント＃コンポーネント
││├──AsyncComponent 
└──index.jsx│││ 
││├──LayoutHeader 
│││├──index.jsx 
│││└──index.less 
││└──LayoutSider 
││├──index.jsx 
││└ index.less - 
│├──index.jsx一入口ファイル＃JS 
│├──層ページのページ番号
││├──チャート
│││├──index.jsx 
│││└──index.less 
│ │├──ホーム
│││├──コンポーネント＃ページ別構成層
││││└──menu.jsx 
│││├──index.jsx 
│││└──index.less 
││└──表
││├ index.jsx - 
││└──index.less 
│減速＃├──減速層
││├──rootReducers.js 
││└──table.js 
│├──request.jsx＃ネットワーク層
│├─ ─routeConfig.jsxの＃ルーティング層
│└──サーバ＃インターフェイス層
│└──table.js 
├──utilsの＃ツール
├──webpack.base.conf.js＃WebPACKの一般的な構成 
├──webpack.dev。 JS＃のWebPACKの開発
├──webpack.prod。 JS＃のWebPACKの生産

継続するには

1. 設定eslint
2. TSの導入
3. ユニットテスト

私のブログへようこそ注意

ブログ

ます。https：//juejin.im/post/5cfc7d7551882520724c8a6bで再現