1

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.

vamsiampolu
  • 6,328
  • 19
  • 82
  • 183

1 Answers1

0

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.

wuct
  • 10,057
  • 2
  • 19
  • 22