使用 redux 工具包在 React 功能组件上显示模态

Question

我有一个显示所有 post 的 table 列表的仪表板页面，对于每个 post 我有一个编辑按钮。

我试图在单击编辑按钮时弹出一个模式。所以我创建了一个 Modal 组件，它由 Dashboard 组件渲染（这是一个等同于 App 组件的高阶组件）我用 redux 工具包添加了模态切片，当单击编辑按钮但模态未显示时，我成功地更改了模态状态。我希望我对我想要实现的目标足够彻底，我也希望你们能帮助我，现在我将与你们分享一些代码。

EditPostModal.jsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { makeStyles } from '@material-ui/core/styles'
import Modal from '@material-ui/core/Modal'
import editPostSlice, {
  getPostToEditModal,
} from '../../store/slices/editPost'

const useStyles = makeStyles((theme) => ({.....}))

export default function SimpleModal() {
  const classes = useStyles()
  const modal = useSelector(getPostToEditModal)
  const dispatch = useDispatch()
  console.log('HEYYYY', modal) // modal is undefined

  const handleClose = () => {
    dispatch(editPostSlice.actions.closeModal())
  }

  if (!modal) return null

  return (
    <Modal
      className={classes.modal}
      open
      onClose={handleClose}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
    >
      <h1>I AM THE MODAL</h1>
    </Modal>
  )
}

Answer 1

调试的第一步是检查模式是否会在没有 redux 工具包切片的情况下打开。

此外，您能否确认 modal 变量始终 return 不是虚假值？

使用 redux 工具包在 React 功能组件上显示模态

Show a Modal on react functional component using redux toolkit

javascript

reactjs

redux

redux-toolkit