react-redux-local-state v1.0.7
react-redux-local-state
A react higher order component (HOC) which automagically uses redux instead of local React state. Use it to expose an existing component's local state to redux or to write new redux ready components without the boilerplate
Usage
Step 1 - Connect reducer to redux
import { createStore, combineReducers } from 'redux'
import { reducer as localStateReducer } from 'react-redux-local-state'
const rootReducer = combineReducers({
localState: localStateReducer
// other reducers here
})
const store = createStore(rootReducer)
Note: by default the reducer's state slice is named is localState, if you need to use a different name you can do so, but the name will have to be passed in the options of each enhancer call.
Step 2 - Enhance your component
import { Enhancer } from 'react-redux-local-state'
import YourComponent from './YourComponent'
// with default options
const EnhancedComponent = Enhancer('componentName')(YourComponent)
export EnhancedComponent
// with custom options
let options = {
componentName: 'otherComponentName',
propName: 'someOtherPropName'
}
const EnhancedComponentWithOptions = Enhancer('componentName', options)(YourComponent)
export EnhancedComponentWithOptions
That's it! All of the enhanced component's local state will now be handled by redux. Any calls to this.setState will fire the 'RRLS_SET_COMPONENT_STATE' action. The component's this.state will be automatically be updated to match the redux store.
Customizing connect's arguments
All enhanced components connect to redux's store to listen to updates to state. If you want to pass custom mapStateToProps or mapDispatchToProps to connect, pass them as fields in the enhancer's option argument. The enhancer will automatically merge the results of your supplied arguments with its own and pass them to the component.
Custom arguments for connect's mergeProps and options are not currently supported.
Props
By default the component will get the setComponentState function and the rrls_localState object as props. If you need to change the name of these props to avoid collisions, you can set the actionName or propName fields in the option object.
Caveats
If you have multiple components with the same componentName, they will all share the same state.
This HOC functions by completely overwriting the enhanced component's setState method. super.setState is never called. This has a few implications: 1. If the component is wrapped in another HOC which overwrites the setState method, or if the component itself overwrites the method, this HOC won't work properly. 2. Normally, this.setState is batched by react. Components enhanced with this HOC instead receive their own local state as a prop. As a result, the internal batching isn't used. This shouldn't affect most component, but could potentially cause issues if the enhanced component somehow relies on the specifics of this internal batching. 3. While this batching isn't used, the overwritten this.setState still won't guarantee that an immediate call to this.state will be updated. A callback should still be used if you need to immediately access an updated this.state
TODO
- better error handling
- tests