higher order component for keeping component state in redux
npm install with-component-statehigher order component that will automatically create state for your redux
components, and give you the prop componentState as well as the propsetState 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:
``js
// 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
}) => (
export default withComponentState()(FlamingoContainer)
`
in combination with connect:
`js
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:
`js``
/>
thanks again
* 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