React Redux在Modal中的使用

Question

我正在React中學習Redux。 我在React中使用Redux進行模態開發。 我的代碼如下

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

我正在錯誤以下。

如何在React Modal中使用Redux？

Answer 1

這里的問題來自使用React門戶

門戶網站提供了一種一流的方式來將子級呈現到父組件的DOM層次結構之外的DOM節點中。

門戶允許在另一個DOM下不呈現React元素。 經過簡化，這看起來像

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

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

因此，在一般情況下， ComponentA將看不到ComponentB Provider 。

您可能會看到此頁面 ，但是它不能完全描述您遇到的問題。

如果查看<Modal>組件源，它將使用React.createPortal呈現自身並失去父級的提供者。

我看到的一種解決方法

1. 從合作伙伴的<Provider/>提取store

2. 在使用<Modal>之后立即創建新的<Provider> 。

    // 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> 

Answer 2

我希望你沒有把所有東西都包好，
打包后，可在整個應用程序中訪問
正如redux所說，必須有單一的真理來源，
一定要遵循原則。

// ModelBody.js
import { Provider, ReactReduxContext } from 'react-redux';

//...
render() {
    return (

        <ReactReduxContext.Consumer>
            {((ctx) => (
         <Provider store={ctx.store}>
                <Modal id="addressModal" open={this.props.controlModal} onClose={this.props.action}>
                      /* 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 */

                </Modal>
           </Provider>
           )).bind(this) // Dont forget to bind this
       }
   </ReactReduxContext.Consumer>

或嘗試包裝整個應用程序index.jsx

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)