Question

由于没有提供官方指南，我不确定如何从redux迁移到hook，就调度动作和从商店中获取状态而言。这样正确吗？

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

选择部分似乎正确

发运的零件没有。

我不确定您在尝试使用那里的效果，但是useDispatch很简单。它将为您提供调度功能，您可以在需要时使用它执行dispatch(mdalActions.showModal('AreaAddGuest'))。

useEffect中的}, [dispatch])部分仅告诉useEffect在分派函数发生更改时运行，这可能永远不会发生，但它也高度依赖于实现。这似乎几乎可以肯定是错误的。

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

还请注意，不必重写代码即可使用钩子。如果这些课程过时了，那么很可能会在未来。

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

1 个答案: