Использование React Redux в модальном режиме

Я изучаю Redux в React. Я использую Redux в React для модальной разработки. Мой код, как показано ниже

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

Я получаю ошибку ниже.

enter image description here

Как использовать Redux в React Modal?

Где вы импортируете Modal? Вы создали этот компонент или это сторонняя библиотека?

Vencovsky 22.05.2019 16:50

Спасибо @Vencovsky. Я создал компонент.

abu abu 22.05.2019 16:52

хочу все завернуть внутрь <Provider store={}>

Ashish Kamble 31.05.2019 10:49
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
4
3
2 556
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема здесь возникает из-за использования Реагировать порталы

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Портал не позволяет отображать элементы React под другим DOM. С упрощениями это будет выглядеть так

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

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

Так что в общем ComponentA не увидит Provider из ComponentB.

Вы можете посмотреть этот страница, однако он не полностью описывает проблему, с которой вы столкнулись.

Если посмотреть на исходный код компонента <Modal>, он использует React.createPortal для рендеринга самого себя и теряет родительский провайдер.

Один обходной путь я вижу

  1. Извлечение store из партнерского <Provider/>
  2. Создайте новый <Provider> сразу после использования <Modal>.

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

Спасибо @Fyodor за ваш ответ. Вот репо github.com/afoysal/mern/blob/master/client/src/components/…. Вы можете проверить.

abu abu 23.05.2019 06:19

Как вы запускаете это приложение? Я клонировал ваш репозиторий на ПК с Windows, но не могу его запустить. Я переустановил модули npm, но все равно не повезло

Fyodor 27.05.2019 09:04

Спасибо @Федор. Я использую Linux Mint 19. Я запускаю проект с командой npm run dev, такой как i.stack.imgur.com/bLAtv.png. Мне нужна ваша помощь. Спасибо.

abu abu 27.05.2019 13:04

Большое Большое Спасибо @Fyodor. Ты действительно гений. Ваше решение работает. Спасибо и Спасибо.

abu abu 02.06.2019 17:00

надеюсь, вы не все правильно завернули внутрь,
после упаковки он доступен во всем приложении,
как утверждает редукс, должен быть единственный источник правды,
старайтесь следовать принципам.

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

Спасибо @Ashish Kamble. Ваше первое решение не работает. Второе решение не соответствует моему компоненту. Вы проверяли репозиторий github? github.com/afoysal/mern/blob/master/client/src/index.js

abu abu 02.06.2019 16:49

Другие вопросы по теме