Skip to content
Snippets Groups Projects
Verified Commit 91f22947 authored by Frank Sauerburger's avatar Frank Sauerburger
Browse files

Clean up Redux skeleton

parent b025dfad
Branches 6-style-page
No related tags found
1 merge request!1Resolve "Add brunch skeleton"
......@@ -2,15 +2,11 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Brunch</title>
<title>Long Route</title>
<link rel="stylesheet" href="/app.css" />
<script src="/app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<div class="brunch">
<a href="http://brunch.io"><img src="http://brunch.io/images/logo.png" alt="Brunch"></a>
<p>Bon Appétit.</p>
<div id="app"></div>
</div>
<div id="app"></div>
</body>
import React from 'react';
import Counter from './Counter';
export default class App extends React.Component {
render() {
const widget = (
<div id="content">
<Counter />
</div>
);
return widget;
return (<p>Hello</p>)
}
}
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
const BaseCounter = ({ count, onPlusClick, onMinusClick }) => (
<div>
<h5><a href="https://redux.js.org/">Redux</a> &amp; <a href="https://facebook.github.io/react/">React</a> Counter</h5>
<p>
<button onClick={onMinusClick}>-</button>
{count}
<button onClick={onPlusClick}>+</button>
</p>
</div>
);
BaseCounter.propTypes = {
count: PropTypes.number.isRequired,
onPlusClick: PropTypes.func.isRequired,
onMinusClick: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({ count: state });
const mapDispatchToProps = dispatch => ({
onPlusClick: () => dispatch({ type: 'INCREMENT' }),
onMinusClick: () => dispatch({ type: 'DECREMENT' }),
});
export default connect(mapStateToProps, mapDispatchToProps)(BaseCounter);
......@@ -2,29 +2,16 @@ import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterApp from './reducers';
import App from './components/App';
const store = createStore(counterApp, module.hot && module.hot.data && (module.hot.data.counter || 0));
if (module.hot) {
module.hot.accept('./reducers', () => {
store.replaceReducer(require('./reducers').default); // eslint-disable-line
});
module.hot.accept();
module.hot.dispose((data) => {
data.counter = store.getState(); // eslint-disable-line
[].slice.apply(document.querySelector('#app').children).forEach(c => c.remove());
});
}
// const store = createStore(counterApp, module.hot && module.hot.data && (module.hot.data.counter || 0));
const load = () => {
ReactDOM.render(
<Provider store={store}>
//<Provider store={store}>
<App />
</Provider>,
document.querySelector('#app')
//</Provider>
, document.querySelector('#app')
);
};
......
export default (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
.brunch {
font-family: -apple-system, Sans-Serif;
text-align: center;
font-size: 24pt;
color: #3f894a;
}
a {
color: #3f894a;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
a:hover {
color: #27552e;
}
h5 > a {
text-decoration: underline;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment