公式ガイドが提供されていないため、アクションをディスパッチしてストアから状態を取得する限り、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
選択部分は正しいようですが、
ディスパッチのある部分はそうではありません。
そこでの効果で何をしようとしているのかわかりませんが、useDispatchは単純です。ディスパッチ機能が提供され、dispatch(mdalActions.showModal('AreaAddGuest'))必要なときに使用できます。
}, [dispatch])useEffectの部分は、ディスパッチ関数が変更されるたびにuseEffectを実行するように指示するだけです。つまり、おそらく決して実行されませんが、実装に大きく依存します。それはほぼ間違いなく間違っているようです。
可能であれば、フックを追加する前にコードを投稿して、元のコードを確認してください。
また、フックを使用するためにコードを書き直す必要は決してないことにも注意してください。クラスが廃止された場合、それはおそらく遠い将来になります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加