Skip to content

Instantly share code, notes, and snippets.

@pixyj
Last active March 16, 2018 14:38
Show Gist options
  • Save pixyj/7d04f8779b3678c383ab3864f75fdd99 to your computer and use it in GitHub Desktop.
Save pixyj/7d04f8779b3678c383ab3864f75fdd99 to your computer and use it in GitHub Desktop.
Minimal react-redux app - Shows what the 'connect' API does. Deployed at https://cranky-yonath-667b1f.netlify.com/
import React, { Component } from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { connect, Provider } from 'react-redux'
// Reducer and Store
function counterReducer(state={value: 0}, action) {
switch(action.type) {
case 'INC':
return Object.assign({}, state, {value: state.value + 1})
default:
return state
}
}
const store = createStore(counterReducer)
// Pure Functional Component
const CounterFunc = ({value, onClick}) => {
return (
<div onClick={onClick} className='minimal-counter'>
{value}
</div>
)
}
// react-redux functions
const mapStateToProps = state => state
const mapDispatchToProps = dispatch => {
return {
onClick: function() {
return dispatch({type: 'INC'})
}
}
}
const ConnectedCounter = connect(
mapStateToProps,
mapDispatchToProps
)(CounterFunc)
// react-dom render
render(
<Provider store={store}>
<ConnectedCounter />
</Provider>,
document.getElementById('root')
)
body {
margin: 0;
padding: 5%;
font-family: sans-serif;
font-size: 1.5rem;
}
.minimal-counter {
padding: 30px;
font-size: 1.4em;
border: 1px solid black;
cursor: pointer;
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment