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 @@
"react-async-bootstrapper": "^1.1.2",
"react-async-component": "^1.0.2",
"react-dom": "^16.2.0",
"react-redux": "^5.0.4",
"react-render-image": "^1.1.1",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
......
......@@ -8,14 +8,15 @@ import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component'
import asyncBootstrapper from 'react-async-bootstrapper'
import { Provider } from 'react-redux'
import { Provider as ReduxProvider } from 'react-redux'
import Routes from '../common/routes'
import { store } from '../common/state'
declare let window: {
__APOLLO_STATE__: any,
__ASYNC_STATE__: any
__ASYNC_STATE__: any,
__REDUX_STATE__: any
}
declare let module: {
......@@ -31,16 +32,18 @@ const apolloClient = new ApolloClient({
const reactRoot: HTMLElement = document.getElementById('react-root');
const reduxStore = store(window.__REDUX_STATE__);
const render = (Routings: React.ComponentClass) => {
return (
<AsyncComponentProvider rehydrateState={window.__ASYNC_STATE__} >
<Provider store={store}>
<ReduxProvider store={reduxStore}>
<ApolloProvider client={apolloClient}>
<Router>
<Routings/>
</Router>
</ApolloProvider>
</Provider>
</ReduxProvider>
</AsyncComponentProvider>
)
}
......@@ -57,5 +60,6 @@ const App = render(Routes);
asyncBootstrapper(App)
.then(() => hydrate(App, reactRoot));
//delete window.__APOLLO_STATE__;
//delete window.__ASYNC_STATE__;
\ No newline at end of file
delete window.__APOLLO_STATE__;
delete window.__ASYNC_STATE__;
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'
import {Component} from 'react'
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 {
render() {
return (
<div>
<h1>Header</h1>
<ul>
<li>
<Link to="/">Main</Link>
</li>
<li>
<Link to="/authors">Authors</Link>
</li>
<li>
<Link to="/articles">Articles</Link>
</li>
<li>
<Link to="/fatComponent">Fat Component</Link>
{
navigation.map(item => (
<li key={item.url} >
<Link to={item.url}>{item.title}</Link>
</li>
))
}
</ul>
</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'
import AllAuthors from './components/asyncAuthors'
import AllArticles from './components/allArticles'
import FatComponent from './components/asyncFatComponent'
import StatefulComponent from './components/statefulComponent'
import AnotherStatefulComponent from './components/anotherStatefulComponent'
class Routes extends Component {
render(){
......@@ -16,6 +18,8 @@ class Routes extends Component {
<Route exact path="/authors" component={AllAuthors}/>
<Route exact path="/articles" component={AllArticles}/>
<Route exact path="/fatComponent" component={FatComponent}/>
<Route exact path="/stateful" component={StatefulComponent}/>
<Route exact path="/anotherStateful" component={AnotherStatefulComponent}/>
</div>
}
}
......
import {combineReducers} 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({
counter: counterReducer
});
export const store = createStore(reducers);
\ No newline at end of file
export const store = (initialState?: any) => createStore(reducers,initialState);
\ No newline at end of file
import { Action } from "redux";
import {createAction, getType} from 'typesafe-actions'
interface State {
export interface State {
count:number
}
......@@ -25,13 +25,13 @@ interface SubAction extends Action {
export const countersAction = {
increment: createAction('INCREMENT'),
add: createAction('ADD',(amount: number):AddAction => ({
add: createAction('ADD',(amount: number = 0):AddAction => ({
type: 'ADD',
payload: {
amount
}
})),
sub: createAction('SUB',(amount: number):SubAction => ({
sub: createAction('SUB',(amount: number = 0):SubAction => ({
type: 'SUB',
payload: {
amount
......
......@@ -8,8 +8,10 @@ import { InMemoryCache } from "apollo-cache-inmemory";
import { renderToString } from 'react-dom/server';
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component';
import asyncBootstrapper from 'react-async-bootstrapper';
import { Provider as ReduxProvider } from 'react-redux'
import Routes from '../common/routes';
import { store } from '../common/state';
export default function (url: string): Promise<string> {
......@@ -25,14 +27,17 @@ export default function (url: string): Promise<string> {
const routerContext = {};
const asyncContext = createAsyncContext();
const reduxStore = store();
const App = (
<AsyncComponentProvider asyncContext={asyncContext} >
<ReduxProvider store={reduxStore}>
<ApolloProvider client={client}>
<StaticRouter location={url} context={routerContext}>
<Routes />
</StaticRouter>
</ApolloProvider>
</ReduxProvider>
</AsyncComponentProvider>
);
......@@ -44,6 +49,7 @@ export default function (url: string): Promise<string> {
const asyncState = JSON.stringify(asyncContext.getState());
const initialState = JSON.stringify(client.extract()).replace(/</g, '\\u003c');
const reduxState = JSON.stringify(reduxStore.getState());
resolve(`<!DOCTYPE html>
<html>
......@@ -54,6 +60,7 @@ export default function (url: string): Promise<string> {
<div id="react-root">${reactHtmlContent}</div>
<script>window.__APOLLO_STATE__=${initialState}</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="/client.js"></script>
</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