withComponentState

higher order component that will automatically create state for your redux components, and give you the prop componentState as well as the prop setState which works like this.setState on class components.

now using redux state is just as easy as using component local state, but with the added benefit of serialise/restore and time travel.

usage:

// withComponentState.js
import create from 'with-component-state'

const {
  reducer,
  withComponentState,
  prefix
} = create()

export {reducer, prefix}

export default withComponentState


// store.js
import {createStore, combineReducers} from 'redux'
import reducers from './reducers'
import * as componentState from './withComponentState'

const rootReducer = combineReducers({
  ...reducers,
  [componentState.prefix]: componentState.reducer
})

export const store = createStore(rootReducer)

// meanwhile in FlamingoContainer.js
import React from 'react'

const FlamingoContainer = ({
  componentState: {sausage, bird, dog},
  setState
}) => (
  <div onClick={() => setState({sausage: sausage + 1})>
    {sausage} and {bird} and {dog}
  </div>
)

export default withComponentState()(FlamingoContainer)

in combination with connect:

import {compose} from 'redux'
import {connect} from 'react-redux'

// …

export default compose(
  connect(mapStateToProps)
  withComponentState()
)(TheCompleteLossOrAbsenceOfHope)

thanks

thanks everybody

oh, if you need multiple of the same component on screen (which you probably won't if you are keeping your state code up in a container), then you can set an id for the component like:

<Dog
  componentStateId={dog.id}
/>

thanks again

todo

• api for setting initial state
• give this a better name. something memorable like pancakeHospital
• dress up as santa claus
• hide in the shed until christmas