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

Question

我不确定如何从 redux 迁移到 hooks，就调度操作和从 store 检索状态而言，因为没有提供官方指南。这种方式正确吗？

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 每当调度函数发生变化时运行，这意味着可能永远不会，但它也高度依赖于实现。这似乎几乎肯定是错误的。

如果可以的话，post添加钩子之前的代码，看看原来是什么。

另请注意，绝对没有必要重写代码来使用挂钩。如果类曾经被淘汰，那很可能是在遥远的未来。

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

How to migrate from redux 'connect' to hooks 'useDispatch' and 'useSelector'?

reactjs

react-redux

react-hooks