From 3aa50333dc9187e309389d0286c71bea3b31fbbb Mon Sep 17 00:00:00 2001 From: Haishan Date: Tue, 23 Oct 2018 23:35:11 +0800 Subject: [PATCH] react: using async react --- package.json | 4 +- src/app.js | 15 +++---- src/components/Root.js | 26 ++++++------ src/store/configureStore.js | 6 +-- yarn.lock | 84 ++++++++++++++++++++++--------------- 5 files changed, 74 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 32b6ed8..9d94652 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app.js b/src/app.js index 6f5a13b..ab58a05 100644 --- a/src/app.js +++ b/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(, document.getElementById('app')); -}; -render(Root, props); +// use async React +const root = ReactDOM.unstable_createRoot(document.getElementById('app')); +root.render(); + +// const render = (Component, props = {}) => { +// ReactDOM.render(, document.getElementById('app')); +// }; +// render(Root, props); diff --git a/src/components/Root.js b/src/components/Root.js index 7c6622a..9399c18 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -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 = () => ( - +
- - - - - + } /> + } /> + } /> + } /> + } />
@@ -50,11 +53,6 @@ const Root = ({ store, history }) => ( // // -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); diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 0c8c201..b94e82a 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -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 }; diff --git a/yarn.lock b/yarn.lock index 88f061e..b21c956 100644 --- a/yarn.lock +++ b/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"