Cfrgtkky

|I have the following component based on this:

**WarningModal.js**



import React from 'react';

import ReactDOM from 'react-dom';

import {connect, Provider} 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';



import configureStore from '../store/configureStore';



const store = configureStore();



export const WarningModal = (props) => {

    const {message, withCleanup} = props;

    const [

        title,

        text,

        leave,

        cancel

    ] = message.split('|');



    const handleOnClick = () => {

        props.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,

    setWarning: PropTypes.func.isRequired

};



const mapStateToProps = state => {

    console.log(state)

    return {

        isWarning: state.app.isWarning

    }

};



const WarningModalContainer = 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(

        <Provider store={store}>

            <WarningModalContainer 

                message={message} 

                withCleanup={withCleanup} 

            />

        </Provider>,

        modal

    );

};

the issue I have is that 'setWarning' doesn't update the state, it does get called as I have a debugger inside the action and the reducer but the actual property doesn't not change to 'false' when:

props.setWarning(false);

gets called.

I use the following to trigger the custom modal:

    const togglePromptCondition = 

        location.hash === '#access-templates' || location.hash === '#security-groups' 

            ? promptCondition

            : isFormDirty || isWarning;



<Prompt message={promptMessage} when={togglePromptCondition} />

To test this even further I have added 2 buttons in the application to toggle 'isWarning' (the state property I am talking about) and it works as expected.

I think that although WarningModal is connected in actual fact it isn't.

REDUCER

...

    case SET_WARNING:

        console.log('reducer called: ', action)

        return {

            ...state,

            isWarning: action.payload 

        };

...

ACTION

...

export const setWarning = status => {

    console.log('action called')

    return {

        type: SET_WARNING,

        payload: status

    }

};

...

UPDATE

After having to incorporates the following:

const mapStateToProps = state => {

    return {

        isWarning: state.app.isWarning

    }

};



const mapDispatchToProps = dispatch => {

    return {

        setWarning: (status) => dispatch({ type: 'SET_WARNING', payload: status })

    }

};

I am now getting:

Maybe this could help?

You have to dispatch the actions in the action creator and the type of the action to dispatch should be always string.

Try this

const mapStateToProps = state => {

   console.log(state)

   return {

       isWarning: state.app.isWarning

   }

};



const mapDispatchToProps = dispatch => {

   console.log(dispatch)

   return {

       setWarning: (status) => dispatch({ type: 'SET_WARNING', payload: status })

   }

};



const WarningModalContainer = connect(mapStateToProps, mapDispatchToProps)(WarningModal);

REDUCER

...

    case 'SET_WARNING':

        console.log('reducer called: ', action)

        return {

            ...state,

            isWarning: action.payload 

        };

...