Компонент React не подключается к магазину

Question

Я использовал this для создания следующего.

import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';

import {Alert, No} from './pure/Icons/Icons';
import Button from './pure/Button/Button';
import Modal from './pure/Modal/Modal';

import {setWarning} from '../actions/app/appActions';

const WarningModal = ({withCleanup, message, isWarning}) => {
    const [
        title,
        text,
        leave,
        cancel
    ] = message.split('|');

    console.log(isWarning)

    const handleOnClick = () => {
        setWarning(false);
        withCleanup(true);
    }

    return(
        <Modal>
            <header>{title}</header>
            <p>{text}</p>
            <Alert />
            <div className="modal__buttons-wrapper modal__buttons-wrapper--center">
                <button 
                    onClick={() => withCleanup(false)} 
                    className="button modal__close-button button--icon button--icon-only button--text-link"
                >
                    <No />
                </button>
                <Button id="leave-warning-button" className="button--transparent-bg" onClick={() => handleOnClick()}>{leave}</Button>
                <Button id="cancel-warning-button" onClick={() => withCleanup(false)}>{cancel}</Button>
            </div>
        </Modal>
    );
}

WarningModal.propTypes = {
    withCleanup: PropTypes.func.isRequired,
    message: PropTypes.string.isRequired,
    isWarning: PropTypes.bool.isRequired
};

const mapStateToProps = state => {
    return {
        isWarning: state.app.isWarning
    }
};

connect(mapStateToProps, {
    setWarning
})(WarningModal);

export default (message, callback) => {
    const modal = document.createElement('div');
    document.body.appendChild(modal);

    const withCleanup = (answer) => {
        ReactDOM.unmountComponentAtNode(modal);
        document.body.removeChild(modal);
        callback(answer);
    };

    ReactDOM.render(
        <WarningModal 
            message={message} 
            withCleanup={withCleanup} 
        />,
        modal
    );
};

Мне нужно отправить действие для обновления свойства состояния ('isWarning'), которое контролирует видимость 'WarningModal ', однако, похоже, это не связывает мой компонент с магазином:

connect(mapStateToProps, {
    setWarning
})(WarningModal);

ConfigureStore.js

...
    return createStore(
        combineReducers(reducers),
        composeEnhancers(
            applyMiddleware(...middlewares)
        )
    );
...

Answer 1

Вызов connect() возвращает упакованный конструктор компонента React.Этот код вообще не использует возвращаемое значение connect, поэтому он выбрасывается.

Наименьшее изменение, которое должно исправить это, будет сохранять возвращаемое значение из connect в новой переменной, ииспользуйте это вместо WarningModal в функции рендеринга конструктора экспортированного компонента:

const WarningModalContainer = connect(mapStateToProps, {
    setWarning
})(WarningModal);

...

ReactDOM.render(
        <WarningModalContainer 
            message={message} 
            withCleanup={withCleanup} 
        />,
        modal
    );

Answer 2

Должно быть

export default connect(mapStateToProps, {
  setWarning
})(WarningModal);

Таким образом, вы импортируете подключенный компонент с редуксом для рендеринга (в отдельном файле) - в вашей версии для рендеринга требуется оригинальный (не подключенный) компонент для монтирования,

Это можно сделать одним файлом, но это не рекомендуется.