React Redux 在 Modal 中的使用

我正在 React 中学习 Redux。我在 React 中使用 Redux 进行 Modal 开发。我的代码如下

render() {
    return (
      <Modal id="addressModal" open={this.props.controlModal} onClose={this.props.action}>
        <Provider store={store}>
          {this.props.addresObj ? (
            <Modal.Header>Address Details</Modal.Header>
          ) : (
            <Modal.Header>Insert Address</Modal.Header>
          )}
          <Modal.Content>
              <ModalElement
                update={this.update}
                element={this.props.addresObj}
                errors = {this.state.errors}
                update_state_photo={this.update_state_photo}
                address={this.props.address}
                action={this.props.action}
              />
          </Modal.Content>

          <Modal.Actions>
            {this.props.addresObj ? (
              <Button
                positive
                icon="checkmark"
                labelPosition="right"
                onClick={this.closeModal}
                content="OK"
              />
            ) : (
              <Button
                positive
                icon="checkmark"
                labelPosition="right"
                onClick={this.insertAddress}
                content="Save"
              />
            )}
          </Modal.Actions>
        </Provider>
      </Modal>
    );
  }
}

（我用过吗<Provider store={store}>正确吗？）在子组件中我无法使用 Redux 语法。就像我用这个一样export default connect()(EditableRow);我收到错误（组件执行未在该组件处完成，执行转发）。如果我使用这个语法export default EditableRow;我没有收到任何错误。

可能是我无法正确表达我的问题。

这是我的仓库https://github.com/afoysal/mern/blob/master/client/src/components/ModalBody.js https://github.com/afoysal/mern/blob/master/client/src/components/ModalBody.js

我遇到以下错误。

如何在 React Modal 中使用 Redux ？

这里的问题是由使用引起的反应门户 https://reactjs.org/docs/portals.html

门户提供了一种一流的方法来将子组件渲染到存在于父组件 DOM 层次结构之外的 DOM 节点中。

Portal 允许在另一个 DOM 下渲染 React 元素。经过简化，这看起来像

const ComponentA = ReactDOM.createPortal(
    <CoolComponent />,
    document.getElementById('banner'),
)

const ComponentB = ReactDOM.createPortal(
    <SuperCoolComponent />,
    document.getElementById('footer'),
)

所以一般来说ComponentA不会看到Provider of ComponentB.

你可以看看这个page https://dev.to/mickmister/sharing-context-with-react-portals-4dki，但是它并没有完全描述您面临的问题。

如果看<Modal>组件源，它使用React.createPortal https://reactjs.org/docs/portals.html自我呈现，失去父母的养育者。

我看到的一种解决方法

1. Extract store来自合作伙伴的<Provider/>

2. 创建新的<Provider>刚过<Modal> usage.

   // ModelBody.js
   import { Provider, ReactReduxContext } from 'react-redux';
   
   //...
   render() {
       return (
           <ReactReduxContext.Consumer>
               {((ctx) => (
                   <Modal id="addressModal" open={this.props.controlModal} onClose={this.props.action}>
                       <Provider store={ctx.store}>  /* make store available in Portal */
                           {this.props.addresObj ? (
                               <Modal.Header>Address Details</Modal.Header>
                           ) : (
                               <Modal.Header>Insert Address</Modal.Header>
                           )}
                       /* other code from Model.js */
                       </Provider>
                   </Modal>
              )).bind(this) // Dont forget to bind this
          }
      </ReactReduxContext.Consumer>