如何使用 React-Bootstrap 和 Redux 显示/隐藏 Modal？

Posted 2023-02-19

【中文标题】如何使用 React-Bootstrap 和 Redux 显示/隐藏 Modal？

【英文标题】：How to show/hide a Modal using React-Bootstrap and Redux?

【发布时间】：2021-11-26 23:46:49

【问题描述】：

我正在学习 redux，并试图让它与 react-bootstrap 模态一起工作。我希望模式显示 redux 中的状态何时设置为 true。但是，当我尝试从 redux 获取状态时，即使状态更改为 true，模态也不会显示。

在使用常规状态组件（useState、setState）时效果很好。

下面的代码不起作用是有原因的吗？

示例反应组件：

const Example = () => 
  const showStore = createStore(showStore.reducer)

  const handleShow = () => 
    showStore.dispatch(type: 'SHOW')
  
 
  const handleClose = () => 
    showStore.dispatch(type: 'HIDE')
  

  return (
    <>
      <Button onClick=handleShow>
        Show modal
      </Button>

      <Modal show=showStore.getState() onHide=handleClose>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <Form>
            <Form.Label>Insert text</Form.Label>
            <Form.Control type="text" placeholder="Sample text" />

            <Modal.Footer>
              <Button onClick=handleClose>
                Cancel
              </Button>
            </Modal.Footer>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  
  )


export default Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

showStore：

const reducer = (state = false, action) => 
  switch (action.type) 
    case 'SHOW' :
      return true
    case 'HIDE' :
      return false
    default:
      return state
  


export default  reducer 

【问题讨论】：

为什么要在组件内创建商店？显然，这种状态对您没有用处，并会导致您描述的问题。

【参考方案1】：

使用 Redux，典型的方法是定义 reducer 并存储在一个文件中：

商店/index.js：

import  createStore  from 'redux';

const modalReducer = (state = false, action) => 
  switch (action.type) 
    case 'SHOW':
      return true;
    case 'HIDE':
      return false;
    default:
      return state;
  
;

const showStore = createStore(modalReducer);

export default showStore;

您的<Example> 组件与以下 sn-p 中的 cmets 指示的一些细微变化基本相同：

Example.js

function Example() 
  // Removed as store creation is now done in the store file
  // const showStore = createStore(showStore.reducer)

  // Extract data from the Redux store state and assign to const
  const showModal = useSelector((state) => state);
  
  const handleShow = () => 
    showStore.dispatch( type: 'SHOW' );
  ;

  const handleClose = () => 
    showStore.dispatch( type: 'HIDE' );
  ;

  return (
    <div>
      <Button onClick=handleShow>Show modal</Button>

      // Changed to use const declared above
      <Modal show=showModal onHide=handleClose>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <Form>
            <Form.Label>Insert text</Form.Label>
            <Form.Control type="text" placeholder="Sample text" />

            <Modal.Footer>
              <Button onClick=handleClose>Cancel</Button>
            </Modal.Footer>
          </Form>
        </Modal.Body>
      </Modal>
    </div>
  );

然后你用<Provider> 包装你的组件的用法（将存储作为道具传递），这样它就变成了：

App.js

render(
  <Provider store=showStore>
    <Example />
  </Provider>,
  document.getElementById('root')
);

确保您导入 showStore:

import showStore from './store';

有一个有效的 StackBlitz 示例 here。