從withHedler中的withReducer檢索重構本地調度函數

Question

我有一個組件已經連接到redux存儲並且已經注入了dispatch 。 我試圖使用withReducer和withHandlers更新組件的本地狀態，如下所示：

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)

我發現當我compose ：

compose(handlers, enhancer)(LayerListItem)

dispatchLocal prop未在handler定義。 創建和綁定動作創建者的最佳方法是recompose以更新應用程序狀態。

Answer 1

你應該將withReducer到右側withHandlers ：

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

通過這種方式， withReducer將首先創建調度函數並將其附加到props ，然后withHandlers可以使用它。