<div id="root"></div>
const { connect } = ReactRedux;
const { Provider } = ReactRedux;
const { createStore } = Redux;
class Counter extends React.Component {
increment = () => {
this.props.dispatch({ type: 'INCREMENT' });
}
decrement = () => {
this.props.dispatch({ type: 'DECREMENT' });
}
render() {
return (
<div>
<h2>Counter</h2>
<div>
<button onClick={this.decrement}>-</button>
<span>{this.props.count}</span>
<button onClick={this.increment}>+</button>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
count: state.count
};
}
const Concounter = connect(mapStateToProps)(Counter);
const initialState = {
count: 0
};
function reducer(state = initialState, action) {
switch(action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
case 'DECREMENT':
return {
count: state.count - 1
};
default:
return state;
}
}
const store = createStore(reducer);
const App = () => (
<Provider store={store}>
<Concounter/>
</Provider>
);
ReactDOM.render(<App />, document.getElementById('root'));
View Compiled
This Pen doesn't use any external CSS resources.