Retrieve recompose local dispatch function from withReducer in withHandlers

Question

I have a component which is already connected to the redux store and has the dispatch injected to it. I am trying to update the local state of the component using withReducer and withHandlers like this:

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_ACTIVE_TAB':
      console.log('recieved action', action)
      const { activeTab } = action
      return activeTab
    default:
     return state
  }

}

const initialState = 'actions'

const handlers = withHandlers({
  onTabClick: props => (e, { name }) => {
    const { dispatchLocal } = props
    dispatchLocal({
      type: 'SET_ACTIVE_TAB',
      activeTab: name
    })
  }
})

const enhancer = withReducer('activeTab', 'dispatchLocal', reducer, initialState)

I find that when I compose :

compose(handlers, enhancer)(LayerListItem)

The dispatchLocal prop is not defined within the handler . What is the best way of creating and binding action creators with recompose to update the application state.

Answer 1

You should move withReducer to the right of withHandlers :

compose(
  withReducer(...),
  withHandlers(...)
)

In this way, withReducer will create the dispatch function first and append it to props , then withHandlers can consume it.