我的钩子没有打开和关闭我的模态

Question

我是新来的反应和 redux，我正在尝试以新的钩子方式做事，并遇到使用 redux state 打开和关闭模态的问题。

基本上，一旦我的页面加载，模式就会打开，即使切片中的初始 state 设置为 false 并且模式页脚中的关闭按钮不会关闭它。

我正在尝试从从npx create-react-app redux-demo --template redux编译的示例中学习，但我显然遗漏了一些东西。

谢谢！

AffinityModal.js

import React from 'react';
import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, } from 'reactstrap';
import { affinOpen, toggleAffinAsync } from '../modalSlice'
import { useDispatch } from 'react-redux';

function AffinityModal() {

  const dispatch = useDispatch();
return (
  <Modal isOpen={affinOpen} toggle={() => dispatch(toggleAffinAsync())}>
  <ModalHeader>
      <h5 className="modal-title" id="exampleModalLabel">New Ingredient Affinity</h5>
      <Button data-dismiss="modal" aria-label="Close" className="close">
        <span aria-hidden="true">&#xD7;</span>
      </Button>
    </ModalHeader>
    <ModalBody>
      <div className="container-fluid">
        <Form>
          <FormGroup>
            <Row>
              <div className="col-12">
                <Label for="mainIngName" className="col-form-label">Main Ingredient:</Label>
              </div>
            </Row>
            <Row>
              <div className="col-12">
                <Input readOnly type="text" id="mainIngName"></Input>
              </div>
            </Row>
          </FormGroup>
          <FormGroup>
            <Row>
              <div className="col-12">
                <Label for="added-ing-text" className="col-form-label">Combines Well With:</Label>
              </div>
            </Row>
            <Row id="secondaryIngs">
              <div className="col-10">
                <Input type="text" id="added-ing-text" className="secIngInputs"></Input>
              </div>
              <div className="col-2">
                <Button id="ingPlusButton">+</Button>
              </div>
            </Row>
          </FormGroup>
        </Form>
      </div>
    </ModalBody><ModalFooter>
      <Button data-dismiss="modal" onClick={() => dispatch(toggleAffinAsync())} color="secondary">Close</Button>
      <Button id="submitNewIngButton" color="primary" className="submitButton">Submit</Button>
    </ModalFooter>
</Modal >
)

}

导出默认 AffinityModal

modalSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const modalSlice = createSlice({
  name: 'openAffinityModal',
  initialState: {
    isAffinityModalOpen: false,
    isRecipeModalOpen: false
  },
  reducers: {
    toggleAffinityModal: state => {
      state.isAffinityModalOpen = !state.isAffinityModalOpen
    },
    toggleRecipeModal: state => {
      state.isRecipeModalOpen = !state.isRecipeModalOpen
    }
  }
})

export const { toggleAffinityModal, toggleRecipeModal } = modalSlice.actions;

export const toggleAffinAsync = isAffinityModalOpen => dispatch => {
    dispatch(toggleAffinityModal);
  };

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state) => state.counter.value)`
//useSelector((state) => state.openAffinityModal.isAffinityModalOpen)
export const affinOpen = state => state.openAffinityModal.isAffinityModalOpen;

export default modalSlice.reducer;

Answer 1

您根本不需要toggleAffinAsync 。 只需使用常规动作创建toggleAffinityModal 。

affinOpen是一个选择器 function。 它不是一个值。 现在，您的Modal始终处于打开状态，因为您将此 function 传递给isOpen道具，并且function在转换为boolean时是boolean的。

为了从 state 中获取boolean值，您需要使用useSelector调用affinOpen 。

function AffinityModal() {
  const dispatch = useDispatch();
  const isOpen = useSelector(affinOpen);
  return (
    <Modal isOpen={isOpen} toggle={() => dispatch(toggleAffinityModal())}>
...

代码沙盒演示

Answer 2

您是否尝试过 reactstrap 文档中的原始版本？

const toggle = () => dispatch(toggleAffinAsync());

<Modal isOpen={affinOpen} toggle={toggle} >
...
</Modal>