Действие не обновляет магазин

Question

| У меня есть следующий компонент, основанный на 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
    );
};

У меня проблема в том, что setWarning не обновляет состояние, а вызывается, когда яесть отладчик внутри действия и редуктор, но фактическое свойство не изменяется на «ложь», когда:

props.setWarning(false);

вызывается.

Я использую следующее для запуска пользовательскогомодальный:

    const togglePromptCondition = 
        location.hash === '#access-templates' || location.hash === '#security-groups' 
            ? promptCondition
            : isFormDirty || isWarning;

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

Чтобы проверить это еще дальше, я добавил в приложение 2 кнопки для переключения isWarning (свойство состояния, о котором я говорю), и оно работает, как и ожидалось.

Я думаю, что хотя WarningModal на самом деле подключен, это не так.

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
    }
};
...

ОБНОВЛЕНИЕ

После необходимости включить следующее:

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

const mapDispatchToProps = dispatch => {
    return {
        setWarning: (status) => dispatch({ type: 'SET_WARNING', payload: status })
    }
};

Теперь я получаю:

Может быть это может помочь?

Answer 1

Вы должны отправить действия в создателе действия, а тип отправляемого действия должен быть всегда строковым.

Попробуйте это

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 
        };
...