Agfdhyk

I have been using this to create the following.

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

    );

};

I need to dispatch an action to update a state property ('isWarning') which controls the visibility of 'WarningModal', however this doesn't seem to connect my component to the store:

connect(mapStateToProps, {

    setWarning

})(WarningModal);



ConfigureStore.js



...

    return createStore(

        combineReducers(reducers),

        composeEnhancers(

            applyMiddleware(...middlewares)

        )

    );

...

The call to connect() returns a wrapped React component constructor. This code is not using the return value of connect at all, so it's thrown away.

The smallest change that should fix this would be to save the return value from connect in a new variable, and use that in place of WarningModal in the exported component constructor's render function:

const WarningModalContainer = connect(mapStateToProps, {

    setWarning

})(WarningModal);

...

ReactDOM.render(

        <WarningModalContainer 

            message={message} 

            withCleanup={withCleanup} 

        />,

        modal

    );

There should be

export default connect(mapStateToProps, {

  setWarning

})(WarningModal);

This way you cen import redux connected component for rendering (in separate file) - in your version render takes original (not connected) component for mount,

It can be done in one file but it isn't recommended.