如何从 redux 'connect' 迁移到钩子 'useDispatch' 和 'useSelector'？

Question

我不确定如何从redux迁移到钩子，就派遣行动和从商店检索状态而言，因为没有提供官方指南。这种方式正确吗？

import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { createSelector } from 'reselect'
import { actions, selectors } from 'data'
import TemplateComponent from './template'
const areaSelectors = selectors.components.areas
const modalActions = actions.modals
const selectAllAreas = createSelector(
  areaSelectors.getAdminAreas,
  areaSelectors.getGuestAreas,
  (adminAreas, guestAreas) => adminAreas.concat(guestAreas)
)
const ContainerComponent = () => {
  const dispatch = useDispatch()
  const allAreas = useSelector(selectAllAreas)
  const adminAreas = useSelector(areaSelectors.getAdminAreas)
  useEffect(() => {
    dispatch(
      modalActions.showModal('AreaAddGuest')
    )
  }, [dispatch])
  const passedProps = {
    allAreas,
    adminAreas
  }
  return <TemplateComponent {...passedProps} />
}
export default ContainerComponent

Answer 1

选择零件似乎正确，

派遣部件没有。

我不确定您在那里的效果如何做什么，但是乘坐的userispatch很简单。它将为您提供一个调度函数，然后在需要完成时可以使用该功能进行dispatch(mdalActions.showModal('AreaAddGuest'))。

使用效果中的}, [dispatch])部分仅告诉使用效果在调度函数更改时运行，这可能永远不会，但也很大程度上取决于实现。这几乎肯定是错误的。

如果可以的话，请在添加钩子之前发布代码，以查看原始的是什么。

还要注意，重写代码无需使用钩子。如果班级被淘汰，那么将来很可能会很远。