Skip to content

Instantly share code, notes, and snippets.

@astur
Last active December 31, 2017 11:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save astur/3658d6fda90a678fb105b0ed62ed1407 to your computer and use it in GitHub Desktop.
Save astur/3658d6fda90a678fb105b0ed62ed1407 to your computer and use it in GitHub Desktop.
Boilerplate for small React+Redux app
//ACTION_CREATORS
const actions = {
setText: function(text){
return{
type: 'SET_TEXT',
text: text
}
},
inc: function(){
return{
type: 'INC'
}
}
}
//REDUCER
function reducer(state = {
text: 'test',
count: 0
}, action) {
switch (action.type) {
case 'SET_TEXT':
return {
text: action.text,
count: state.count
}
case 'INC':
return {
text: state.text,
count: state.count + 1
}
default:
return state
}
}
//MIDDLEWARE
const rLog = store => next => action => {
console.log(action)
console.log('BEFORE:', store.getState())
let result = next(action)
console.log('AFTER:', store.getState())
return result
}
//STORE
const store = Redux.createStore(reducer, Redux.applyMiddleware(rLog))
//COMPONENT
const Test = React.createClass({
render: function(){
return (
<h1 onClick={this.props.actions.inc}>{this.props.text + ':' + this.props.count}</h1>
)
}
})
//CONTAINER
const RTest = ReactRedux.connect(
function(state){
return state
},
function(dispatch){
return {
actions: Redux.bindActionCreators(actions, dispatch)
}
}
)(Test)
//MAIN CODE
const Provider = ReactRedux.Provider
ReactDOM.render(
<Provider store={store}>
<RTest/>
</Provider>,
document.body
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment