react: using async react
This commit is contained in:
Haishan
parent
09c6bf12e9
commit
3aa50333dc
5 changed files with 74 additions and 61 deletions
|
|
@ -42,8 +42,8 @@
|
|||
"react-dom": "^16.5.2",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-modal": "^3.6.1",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-redux": "^6.0.0-alpha.2a2f108",
|
||||
"react-router-dom": "4.4.0-beta.4",
|
||||
"redux": "^4.0.1",
|
||||
"redux-logger": "^3.0.6",
|
||||
"redux-thunk": "^2.2.0",
|
||||
|
|
|
|||
15
src/app.js
15
src/app.js
|
|
@ -3,14 +3,15 @@ import 'modern-normalize/modern-normalize.css';
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Modal from 'react-modal';
|
||||
import { history, store } from './store/configureStore';
|
||||
import Root from './components/Root';
|
||||
|
||||
const props = { history, store };
|
||||
|
||||
Modal.setAppElement('#app');
|
||||
const render = (Component, props = {}) => {
|
||||
ReactDOM.render(<Component {...props} />, document.getElementById('app'));
|
||||
};
|
||||
|
||||
render(Root, props);
|
||||
// use async React
|
||||
const root = ReactDOM.unstable_createRoot(document.getElementById('app'));
|
||||
root.render(<Root />);
|
||||
|
||||
// const render = (Component, props = {}) => {
|
||||
// ReactDOM.render(<Component {...props} />, document.getElementById('app'));
|
||||
// };
|
||||
// render(Root, props);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Router, Route } from 'react-router-dom';
|
||||
import { HashRouter as Router, Route } from 'react-router-dom';
|
||||
import { hot } from 'react-hot-loader';
|
||||
// import createHistory from 'history/createHashHistory';
|
||||
// import createHistory from 'history/createBrowserHistory';
|
||||
|
||||
import SideBar from 'c/SideBar';
|
||||
import Home from 'c/Home';
|
||||
|
|
@ -12,6 +13,8 @@ import Config from 'c/Config';
|
|||
|
||||
import APIDiscovery from 'c/APIDiscovery';
|
||||
|
||||
import { store } from '../store/configureStore';
|
||||
|
||||
// testing...
|
||||
// import StyleGuide from 'c/StyleGuide';
|
||||
// import Loading from 'c/Loading';
|
||||
|
|
@ -30,18 +33,18 @@ import APIDiscovery from 'c/APIDiscovery';
|
|||
import './Root.scss';
|
||||
import s0 from './Root.module.scss';
|
||||
|
||||
const Root = ({ store, history }) => (
|
||||
const Root = () => (
|
||||
<Provider store={store}>
|
||||
<Router history={history}>
|
||||
<Router>
|
||||
<div className={s0.app}>
|
||||
<APIDiscovery />
|
||||
<Route path="/" component={SideBar} />
|
||||
<div style={{ flexGrow: '1', overflow: 'scroll' }}>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route exact path="/overview" component={Home} />
|
||||
<Route exact path="/configs" component={Config} />
|
||||
<Route exact path="/logs" component={Logs} />
|
||||
<Route exact path="/proxies" component={Proxies} />
|
||||
<Route exact path="/" render={() => <Home />} />
|
||||
<Route exact path="/overview" render={() => <Home />} />
|
||||
<Route exact path="/configs" render={() => <Config />} />
|
||||
<Route exact path="/logs" render={() => <Logs />} />
|
||||
<Route exact path="/proxies" render={() => <Proxies />} />
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
|
|
@ -50,11 +53,6 @@ const Root = ({ store, history }) => (
|
|||
// <Route exact path="/__0" component={StyleGuide} />
|
||||
// <Route exact path="/__1" component={Loading} />
|
||||
|
||||
Root.propTypes = {
|
||||
store: PropTypes.object,
|
||||
history: PropTypes.object
|
||||
};
|
||||
|
||||
// hot export Root
|
||||
// https://github.com/gaearon/react-hot-loader/tree/v4.0.1#getting-started
|
||||
export default hot(module)(Root);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import { createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunkMiddleware from 'redux-thunk';
|
||||
import createHistory from 'history/createHashHistory';
|
||||
// import createHistory from 'history/createBrowserHistory';
|
||||
import rootReducer from '../ducks';
|
||||
|
||||
// const preloadedState = loadState();
|
||||
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
|
||||
|
||||
function configureStore() {
|
||||
|
|
@ -24,7 +21,6 @@ function configureStore() {
|
|||
return store;
|
||||
}
|
||||
|
||||
const history = createHistory();
|
||||
const store = configureStore();
|
||||
|
||||
export { store, history };
|
||||
export { store };
|
||||
|
|
|
|||
84
yarn.lock
84
yarn.lock
|
|
@ -2210,6 +2210,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
|||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
create-react-context@^0.2.2:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
|
||||
integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
|
||||
dependencies:
|
||||
fbjs "^0.8.0"
|
||||
gud "^1.0.0"
|
||||
|
||||
cross-spawn@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
|
||||
|
|
@ -3233,7 +3241,7 @@ fastparse@^1.1.1:
|
|||
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
|
||||
integrity sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=
|
||||
|
||||
fbjs@^0.8.16:
|
||||
fbjs@^0.8.0, fbjs@^0.8.16:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
||||
|
|
@ -3639,6 +3647,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
|
|||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
|
||||
integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
|
||||
|
||||
gud@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
|
||||
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
|
||||
|
||||
gzip-size@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.0.0.tgz#a55ecd99222f4c48fd8c01c625ce3b349d0a0e80"
|
||||
|
|
@ -3771,6 +3784,13 @@ hoist-non-react-statics@^2.5.0:
|
|||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
|
||||
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
|
||||
|
||||
hoist-non-react-statics@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz#fba3e7df0210eb9447757ca1a7cb607162f0a364"
|
||||
integrity sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==
|
||||
dependencies:
|
||||
react-is "^16.3.2"
|
||||
|
||||
hoopy@^0.1.2:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
|
||||
|
|
@ -4059,13 +4079,6 @@ interpret@^1.0.0, interpret@^1.1.0:
|
|||
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
|
||||
integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=
|
||||
|
||||
invariant@^2.0.0:
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
|
||||
integrity sha512-7Z5PPegwDTyjbaeCnV0efcyS6vdKAU51kpEmS7QFib3P4822l8ICYyMn7qvJnc+WzLoDsuI9gPMKbJ8pCu8XtA==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
|
|
@ -4736,11 +4749,6 @@ locate-path@^3.0.0:
|
|||
p-locate "^3.0.0"
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash-es@^4.17.5:
|
||||
version "4.17.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f"
|
||||
integrity sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw==
|
||||
|
||||
lodash.assign@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
|
||||
|
|
@ -6444,7 +6452,7 @@ prop-types@^15.5.0:
|
|||
loose-envify "^1.3.1"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
version "15.6.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
|
||||
integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
|
||||
|
|
@ -6628,6 +6636,11 @@ react-hot-loader@^4.2.0:
|
|||
react-lifecycles-compat "^3.0.4"
|
||||
shallowequal "^1.0.2"
|
||||
|
||||
react-is@^16.3.2, react-is@^16.4.2:
|
||||
version "16.5.2"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
|
||||
integrity sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ==
|
||||
|
||||
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
|
|
@ -6650,41 +6663,41 @@ react-modal@^3.6.1:
|
|||
react-lifecycles-compat "^3.0.0"
|
||||
warning "^3.0.0"
|
||||
|
||||
react-redux@^5.0.6:
|
||||
version "5.0.7"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
|
||||
integrity sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==
|
||||
react-redux@^6.0.0-alpha.2a2f108:
|
||||
version "6.0.0-alpha.2a2f108"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-alpha.2a2f108.tgz#c8ae15b62bacf07533020455df83e03fd0078d68"
|
||||
integrity sha512-ftD3wvjV48z1Om0uDHBJNnKeliPTryBarRcI+j1vAPB6Yka/afze4ZNtBjqpTzA326pWwGUQPRfZyj13JBZSKw==
|
||||
dependencies:
|
||||
hoist-non-react-statics "^2.5.0"
|
||||
invariant "^2.0.0"
|
||||
lodash "^4.17.5"
|
||||
lodash-es "^4.17.5"
|
||||
hoist-non-react-statics "^3.0.1"
|
||||
invariant "^2.2.4"
|
||||
loose-envify "^1.1.0"
|
||||
prop-types "^15.6.0"
|
||||
prop-types "^15.6.2"
|
||||
react-is "^16.4.2"
|
||||
shallow-equals "^1.0.0"
|
||||
|
||||
react-router-dom@^4.2.2:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
|
||||
integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==
|
||||
react-router-dom@4.4.0-beta.4:
|
||||
version "4.4.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.4.0-beta.4.tgz#2b019a27edd572a52793616edd1f93852821a7c0"
|
||||
integrity sha512-YD+FdcoB4gpiIEnw6AXZbR33c5X34q7urqGHpJCmHCL6gS71YdYfyBI+yITuVXEvJTOHlCaB0ip84hjpueuBwA==
|
||||
dependencies:
|
||||
history "^4.7.2"
|
||||
invariant "^2.2.4"
|
||||
loose-envify "^1.3.1"
|
||||
prop-types "^15.6.1"
|
||||
react-router "^4.3.1"
|
||||
react-router "^4.4.0-beta.4"
|
||||
warning "^4.0.1"
|
||||
|
||||
react-router@^4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
|
||||
integrity sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==
|
||||
react-router@^4.4.0-beta.4:
|
||||
version "4.4.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.4.0-beta.4.tgz#9000e42880135e1ee8404f74e6b91eb6b97d6cc4"
|
||||
integrity sha512-Ktdx4prUdHc/mY/M4G3Dge3y/ubO7+WVV/RpJQRVQeJXErAXspgn3fYmdBRuMdGBHwOqskdTqwkE+dEmkgdrxA==
|
||||
dependencies:
|
||||
create-react-context "^0.2.2"
|
||||
history "^4.7.2"
|
||||
hoist-non-react-statics "^2.5.0"
|
||||
invariant "^2.2.4"
|
||||
loose-envify "^1.3.1"
|
||||
path-to-regexp "^1.7.0"
|
||||
prop-types "^15.6.1"
|
||||
warning "^4.0.1"
|
||||
|
||||
react@^16.5.2:
|
||||
|
|
@ -7286,6 +7299,11 @@ shallow-clone@^1.0.0:
|
|||
kind-of "^5.0.0"
|
||||
mixin-object "^2.0.1"
|
||||
|
||||
shallow-equals@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/shallow-equals/-/shallow-equals-1.0.0.tgz#24b74bf1c634c11ed4c7182a6df6fb300dce4390"
|
||||
integrity sha1-JLdL8cY0wR7Uxxgqbfb7MA3OQ5A=
|
||||
|
||||
shallowequal@^1.0.2:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
|
|
|
|||
Loading…
Reference in a new issue