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

【问题标题】：How to migrate from redux 'connect' to hooks 'useDispatch' and 'useSelector'?如何从 redux 'connect' 迁移到 hooks 'useDispatch' 和 'useSelector'？
【发布时间】：2019-07-08 09:22:57
【问题描述】：

我不确定如何从 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

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案1】：

选择部分似乎正确，

dispatch 的部分没有。

我不确定您要对那里的效果做什么，但 useDispatch 很简单。它将为您提供一个调度功能，然后您可以在需要时使用它来执行dispatch(mdalActions.showModal('AreaAddGuest'))。

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

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

另外请注意，使用钩子并没有必要重写代码。如果这些课程过时了，那很可能是很久以后的事了。

【讨论】：