Commit cafa821d authored by Jens's avatar Jens
Browse files

redux done

parent 5b5bf09c
This diff is collapsed.
webpackJsonp([1],{
/***/ 218:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(0);
const graphql_tag_1 = __webpack_require__(74);
const react_apollo_1 = __webpack_require__(38);
const query = graphql_tag_1.default `
query getAllAuthors {
allAuthors {
totalCount
nodes {
nodeId
id
name
articlesByAuthorId {
totalCount
}
}
}
}
`;
class AllAuthors extends React.Component {
render() {
if (this.props.data.loading) {
return React.createElement("div", null, "Loading...");
}
else if (this.props.data.error) {
return React.createElement("div", null,
"Error: ",
this.props.data.error.message);
}
return (React.createElement("div", null,
React.createElement("h2", null, "Authors"),
React.createElement("ul", null, this.props.data.allAuthors.nodes.map(author => (React.createElement("li", { key: author.nodeId },
React.createElement("div", null,
"Name: ",
author.name),
React.createElement("div", null,
"NumberOfArticles: ",
author.articlesByAuthorId.totalCount)))))));
}
}
exports.default = react_apollo_1.graphql(query)(AllAuthors);
;(function register() { /* react-hot-loader/webpack */ if (true) { if (typeof __REACT_HOT_LOADER__ === 'undefined') { return; } /* eslint-disable camelcase, no-undef */ var webpackExports = typeof __webpack_exports__ !== 'undefined' ? __webpack_exports__ : module.exports; /* eslint-enable camelcase, no-undef */ if (typeof webpackExports === 'function') { __REACT_HOT_LOADER__.register(webpackExports, 'module.exports', "C:\\Users\\Jens.Neuse\\repos\\react-workshop\\front-end\\renderine\\src\\common\\components\\allAuthors.tsx"); return; } /* eslint-disable no-restricted-syntax */ for (var key in webpackExports) { /* eslint-enable no-restricted-syntax */ if (!Object.prototype.hasOwnProperty.call(webpackExports, key)) { continue; } var namedExport = void 0; try { namedExport = webpackExports[key]; } catch (err) { continue; } __REACT_HOT_LOADER__.register(namedExport, key, "C:\\Users\\Jens.Neuse\\repos\\react-workshop\\front-end\\renderine\\src\\common\\components\\allAuthors.tsx"); } } })();
/***/ })
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvY29tbW9uL2NvbXBvbmVudHMvYWxsQXV0aG9ycy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQSxxQ0FBOEI7QUFDOUIsOENBQThCO0FBQzlCLCtDQUErQztBQUcvQyxNQUFNLEtBQUssR0FBRyxxQkFBRzs7Ozs7Ozs7Ozs7Ozs7Q0FjaEIsQ0FBQztBQU1GLGdCQUFpQixTQUFRLEtBQUssQ0FBQyxTQUFnQjtJQUMzQyxNQUFNO1FBRUYsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUM7WUFDekIsTUFBTSxDQUFDLDhDQUFxQjtRQUNoQyxDQUFDO1FBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFDO1lBQzlCLE1BQU0sQ0FBQzs7Z0JBQWEsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBTztRQUM1RCxDQUFDO1FBRUQsTUFBTSxDQUFDLENBQ0g7WUFDSSwwQ0FBZ0I7WUFDaEIsZ0NBRUksSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUMzQyw0QkFBSSxHQUFHLEVBQUUsTUFBTSxDQUFDLE1BQU07Z0JBQ2xCOztvQkFBWSxNQUFNLENBQUMsSUFBSSxDQUFPO2dCQUM5Qjs7b0JBQXdCLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxVQUFVLENBQU8sQ0FDbEUsQ0FDUixDQUFDLENBRUQsQ0FDSCxDQUNUO0lBQ0wsQ0FBQztDQUNKO0FBRUQsa0JBQWUsc0JBQU8sQ0FBOEIsS0FBSyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMiLCJmaWxlIjoiMS5jbGllbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcclxuaW1wb3J0IGdxbCBmcm9tICdncmFwaHFsLXRhZyc7XHJcbmltcG9ydCB7Z3JhcGhxbCxRdWVyeVByb3BzfSBmcm9tICdyZWFjdC1hcG9sbG8nXHJcbmltcG9ydCB7Z2V0QWxsQXV0aG9yc1F1ZXJ5fSBmcm9tICcuLi8uLi8uLi9ncmFwaHFsLXR5cGVzJztcclxuXHJcbmNvbnN0IHF1ZXJ5ID0gZ3FsYFxyXG4gICAgcXVlcnkgZ2V0QWxsQXV0aG9ycyB7XHJcbiAgICAgICAgYWxsQXV0aG9ycyB7XHJcbiAgICAgICAgICAgIHRvdGFsQ291bnRcclxuICAgICAgICAgICAgbm9kZXMge1xyXG4gICAgICAgICAgICAgICAgbm9kZUlkXHJcbiAgICAgICAgICAgICAgICBpZFxyXG4gICAgICAgICAgICAgICAgbmFtZVxyXG4gICAgICAgICAgICAgICAgYXJ0aWNsZXNCeUF1dGhvcklkIHtcclxuICAgICAgICAgICAgICAgICAgICB0b3RhbENvdW50XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcbmA7XHJcblxyXG5pbnRlcmZhY2UgUHJvcHMge1xyXG4gICAgZGF0YTogUXVlcnlQcm9wcyAmIGdldEFsbEF1dGhvcnNRdWVyeVxyXG59XHJcblxyXG5jbGFzcyBBbGxBdXRob3JzIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50PFByb3BzPiB7XHJcbiAgICByZW5kZXIoKSB7XHJcblxyXG4gICAgICAgIGlmICh0aGlzLnByb3BzLmRhdGEubG9hZGluZyl7XHJcbiAgICAgICAgICAgIHJldHVybiA8ZGl2PkxvYWRpbmcuLi48L2Rpdj5cclxuICAgICAgICB9IGVsc2UgaWYgKHRoaXMucHJvcHMuZGF0YS5lcnJvcil7XHJcbiAgICAgICAgICAgIHJldHVybiA8ZGl2PkVycm9yOiB7dGhpcy5wcm9wcy5kYXRhLmVycm9yLm1lc3NhZ2V9PC9kaXY+XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICA8ZGl2PlxyXG4gICAgICAgICAgICAgICAgPGgyPkF1dGhvcnM8L2gyPlxyXG4gICAgICAgICAgICAgICAgPHVsPlxyXG4gICAgICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgICAgIHRoaXMucHJvcHMuZGF0YS5hbGxBdXRob3JzLm5vZGVzLm1hcChhdXRob3IgPT4gKFxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8bGkga2V5PXthdXRob3Iubm9kZUlkfT5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXY+TmFtZToge2F1dGhvci5uYW1lfTwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdj5OdW1iZXJPZkFydGljbGVzOiB7YXV0aG9yLmFydGljbGVzQnlBdXRob3JJZC50b3RhbENvdW50fTwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8L2xpPlxyXG4gICAgICAgICAgICAgICAgICAgICkpXHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICA8L3VsPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICApXHJcbiAgICB9XHJcbn1cclxuXHJcbmV4cG9ydCBkZWZhdWx0IGdyYXBocWw8Z2V0QWxsQXV0aG9yc1F1ZXJ5LFByb3BzLHt9PihxdWVyeSkoQWxsQXV0aG9ycyk7XG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vc3JjL2NvbW1vbi9jb21wb25lbnRzL2FsbEF1dGhvcnMudHN4Il0sInNvdXJjZVJvb3QiOiIifQ==
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"react-async-bootstrapper": "^1.1.2", "react-async-bootstrapper": "^1.1.2",
"react-async-component": "^1.0.2", "react-async-component": "^1.0.2",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-redux": "^5.0.4",
"react-render-image": "^1.1.1", "react-render-image": "^1.1.1",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"redux": "^3.7.2", "redux": "^3.7.2",
......
...@@ -8,14 +8,15 @@ import ApolloClient from "apollo-client"; ...@@ -8,14 +8,15 @@ import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory"; import { InMemoryCache } from "apollo-cache-inmemory";
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component' import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'
import asyncBootstrapper from 'react-async-bootstrapper' import asyncBootstrapper from 'react-async-bootstrapper'
import { Provider } from 'react-redux' import { Provider as ReduxProvider } from 'react-redux'
import Routes from '../common/routes' import Routes from '../common/routes'
import { store } from '../common/state' import { store } from '../common/state'
declare let window: { declare let window: {
__APOLLO_STATE__: any, __APOLLO_STATE__: any,
__ASYNC_STATE__: any __ASYNC_STATE__: any,
__REDUX_STATE__: any
} }
declare let module: { declare let module: {
...@@ -31,16 +32,18 @@ const apolloClient = new ApolloClient({ ...@@ -31,16 +32,18 @@ const apolloClient = new ApolloClient({
const reactRoot: HTMLElement = document.getElementById('react-root'); const reactRoot: HTMLElement = document.getElementById('react-root');
const reduxStore = store(window.__REDUX_STATE__);
const render = (Routings: React.ComponentClass) => { const render = (Routings: React.ComponentClass) => {
return ( return (
<AsyncComponentProvider rehydrateState={window.__ASYNC_STATE__} > <AsyncComponentProvider rehydrateState={window.__ASYNC_STATE__} >
<Provider store={store}> <ReduxProvider store={reduxStore}>
<ApolloProvider client={apolloClient}> <ApolloProvider client={apolloClient}>
<Router> <Router>
<Routings/> <Routings/>
</Router> </Router>
</ApolloProvider> </ApolloProvider>
</Provider> </ReduxProvider>
</AsyncComponentProvider> </AsyncComponentProvider>
) )
} }
...@@ -57,5 +60,6 @@ const App = render(Routes); ...@@ -57,5 +60,6 @@ const App = render(Routes);
asyncBootstrapper(App) asyncBootstrapper(App)
.then(() => hydrate(App, reactRoot)); .then(() => hydrate(App, reactRoot));
//delete window.__APOLLO_STATE__; delete window.__APOLLO_STATE__;
//delete window.__ASYNC_STATE__; delete window.__ASYNC_STATE__;
\ No newline at end of file delete window.__REDUX_STATE__
\ No newline at end of file
import * as React from 'react'
import {Component} from 'react'
import {connect} from 'react-redux'
import {State} from '../state'
import {countersAction} from '../state/reducers/counter'
import {getType} from 'typesafe-actions'
interface StateProps {
count: number
}
interface ActionProps {
increment: () => void,
sub: (amount: number) => void,
}
interface Props extends StateProps,ActionProps {}
class AnotherStatefulComponent extends Component<Props> {
constructor(props: Props){
super(props);
this.increase = this.increase.bind(this);
this.decrease = this.decrease.bind(this);
}
increase(){
console.log('increase');
this.props.increment();
}
decrease(){
console.log('decrease');
this.props.sub(1);
}
render(){
console.log('stateful',this.props);
return (
<div>
<h3>Another Stateful Component</h3>
<br/>
<br/>
<p>Count: {this.props.count}</p>
<button onClick={this.decrease} >decrease counter</button>
<br/>
<br/>
<button onClick={this.increase} >increase counter</button>
</div>
)
}
}
export default connect<StateProps>((state: State) => ({
count: state.counter.count
}),{
increment: countersAction.increment,
sub: countersAction.sub
})(AnotherStatefulComponent)
\ No newline at end of file
...@@ -2,24 +2,46 @@ import * as React from 'react' ...@@ -2,24 +2,46 @@ import * as React from 'react'
import {Component} from 'react' import {Component} from 'react'
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
const navigation: [{url: string,title:string}] = [
{
url: '/main',
title: 'Main'
},
{
url: '/authors',
title: 'Authors'
},
{
url: '/articles',
title: 'Articles'
},
{
url: '/fatComponent',
title: 'Fat Component'
},
{
url: '/stateful',
title: 'Stateful'
},
{
url: '/anotherStateful',
title: 'Another Stateful Component'
}
]
class Header extends Component { class Header extends Component {
render() { render() {
return ( return (
<div> <div>
<h1>Header</h1> <h1>Header</h1>
<ul> <ul>
<li> {
<Link to="/">Main</Link> navigation.map(item => (
</li> <li key={item.url} >
<li> <Link to={item.url}>{item.title}</Link>
<Link to="/authors">Authors</Link> </li>
</li> ))
<li> }
<Link to="/articles">Articles</Link>
</li>
<li>
<Link to="/fatComponent">Fat Component</Link>
</li>
</ul> </ul>
</div> </div>
) )
......
import * as React from 'react'
import {Component} from 'react'
import {connect} from 'react-redux'
import {State} from '../state'
import {countersAction} from '../state/reducers/counter'
import {getType} from 'typesafe-actions'
interface StateProps {
count: number
}
interface ActionProps {
increment: () => void,
sub: (amount: number) => void,
}
interface Props extends StateProps,ActionProps {}
class StatefulComponent extends Component<Props> {
constructor(props: Props){
super(props);
this.increase = this.increase.bind(this);
this.decrease = this.decrease.bind(this);
}
increase(){
console.log('increase');
this.props.increment();
}
decrease(){
console.log('decrease');
this.props.sub(1);
}
render(){
console.log('stateful',this.props);
return (
<div>
<h3>Stateful Component</h3>
<p>Count: {this.props.count}</p>
<button onClick={this.increase} >increase counter</button>
<br/>
<br/>
<button onClick={this.decrease} >decrease counter</button>
</div>
)
}
}
export default connect<StateProps>((state: State) => ({
count: state.counter.count
}),{
increment: countersAction.increment,
sub: countersAction.sub
})(StatefulComponent)
\ No newline at end of file
...@@ -7,6 +7,8 @@ import Main from './components/home' ...@@ -7,6 +7,8 @@ import Main from './components/home'
import AllAuthors from './components/asyncAuthors' import AllAuthors from './components/asyncAuthors'
import AllArticles from './components/allArticles' import AllArticles from './components/allArticles'
import FatComponent from './components/asyncFatComponent' import FatComponent from './components/asyncFatComponent'
import StatefulComponent from './components/statefulComponent'
import AnotherStatefulComponent from './components/anotherStatefulComponent'
class Routes extends Component { class Routes extends Component {
render(){ render(){
...@@ -16,6 +18,8 @@ class Routes extends Component { ...@@ -16,6 +18,8 @@ class Routes extends Component {
<Route exact path="/authors" component={AllAuthors}/> <Route exact path="/authors" component={AllAuthors}/>
<Route exact path="/articles" component={AllArticles}/> <Route exact path="/articles" component={AllArticles}/>
<Route exact path="/fatComponent" component={FatComponent}/> <Route exact path="/fatComponent" component={FatComponent}/>
<Route exact path="/stateful" component={StatefulComponent}/>
<Route exact path="/anotherStateful" component={AnotherStatefulComponent}/>
</div> </div>
} }
} }
......
import {combineReducers} from 'redux' import {combineReducers} from 'redux'
import {createStore} from "redux"; import {createStore} from "redux";
import {reducer as counterReducer} from './reducers/counter' import {reducer as counterReducer,State as counterState} from './reducers/counter'
export interface State {
counter: counterState
}
const reducers = combineReducers({ const reducers = combineReducers({
counter: counterReducer counter: counterReducer
}); });
export const store = createStore(reducers); export const store = (initialState?: any) => createStore(reducers,initialState);
\ No newline at end of file \ No newline at end of file
import { Action } from "redux"; import { Action } from "redux";
import {createAction, getType} from 'typesafe-actions' import {createAction, getType} from 'typesafe-actions'
interface State { export interface State {
count:number count:number
} }
...@@ -25,13 +25,13 @@ interface SubAction extends Action { ...@@ -25,13 +25,13 @@ interface SubAction extends Action {
export const countersAction = { export const countersAction = {
increment: createAction('INCREMENT'), increment: createAction('INCREMENT'),
add: createAction('ADD',(amount: number):AddAction => ({ add: createAction('ADD',(amount: number = 0):AddAction => ({
type: 'ADD', type: 'ADD',
payload: { payload: {
amount amount
} }
})), })),
sub: createAction('SUB',(amount: number):SubAction => ({ sub: createAction('SUB',(amount: number = 0):SubAction => ({
type: 'SUB', type: 'SUB',
payload: { payload: {
amount amount
......
...@@ -8,8 +8,10 @@ import { InMemoryCache } from "apollo-cache-inmemory"; ...@@ -8,8 +8,10 @@ import { InMemoryCache } from "apollo-cache-inmemory";
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'; import { AsyncComponentProvider, createAsyncContext } from 'react-async-component';
import asyncBootstrapper from 'react-async-bootstrapper'; import asyncBootstrapper from 'react-async-bootstrapper';
import { Provider as ReduxProvider } from 'react-redux'
import Routes from '../common/routes'; import Routes from '../common/routes';
import { store } from '../common/state';
export default function (url: string): Promise<string> { export default function (url: string): Promise<string> {
...@@ -25,14 +27,17 @@ export default function (url: string): Promise<string> { ...@@ -25,14 +27,17 @@ export default function (url: string): Promise<string> {
const routerContext = {}; const routerContext = {};
const asyncContext = createAsyncContext(); const asyncContext = createAsyncContext();
const reduxStore = store();
const App = ( const App = (
<AsyncComponentProvider asyncContext={asyncContext} > <AsyncComponentProvider asyncContext={asyncContext} >
<ApolloProvider client={client}> <ReduxProvider store={reduxStore}>
<StaticRouter location={url} context={routerContext}> <ApolloProvider client={client}>
<Routes /> <StaticRouter location={url} context={routerContext}>
</StaticRouter> <Routes />
</ApolloProvider> </StaticRouter>
</ApolloProvider>
</ReduxProvider>
</AsyncComponentProvider> </AsyncComponentProvider>
); );
...@@ -44,6 +49,7 @@ export default function (url: string): Promise<string> { ...@@ -44,6 +49,7 @@ export default function (url: string): Promise<string> {
const asyncState = JSON.stringify(asyncContext.getState()); const asyncState = JSON.stringify(asyncContext.getState());
const initialState = JSON.stringify(client.extract()).replace(/</g, '\\u003c'); const initialState = JSON.stringify(client.extract()).replace(/</g, '\\u003c');
const reduxState = JSON.stringify(reduxStore.getState());
resolve(`<!DOCTYPE html> resolve(`<!DOCTYPE html>
<html> <html>
...@@ -54,6 +60,7 @@ export default function (url: string): Promise<string> { ...@@ -54,6 +60,7 @@ export default function (url: string): Promise<string> {
<div id="react-root">${reactHtmlContent}</div> <div id="react-root">${reactHtmlContent}</div>
<script>window.__APOLLO_STATE__=${initialState}</script> <script>window.__APOLLO_STATE__=${initialState}</script>
<script>window.__ASYNC_STATE__=${asyncState}</script> <script>window.__ASYNC_STATE__=${asyncState}</script>
<script>window.__REDUX_STATE__=${reduxState}</script>
<script type="text/javascript" src="/vendor.js"></script> <script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/client.js"></script> <script type="text/javascript" src="/client.js"></script>
</body> </body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment