动作不会更新商店

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'不会更新状态，它的确会被调用，因为我在动作和reducer内都有调试器，但在以下情况下，实际属性不会更改为'false'：< / p>

props.setWarning(false);

被叫。

我使用以下代码触发自定义模式：

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

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

为了进一步测试这一点，我在应用程序中添加了2个按钮来切换“ isWarning”（我正在谈论的state属性），并且按预期运行。

我认为，尽管实际上连接了WarningModal，但实际上并没有。

减速机

...
    case SET_WARNING:
        console.log('reducer called: ', action)
        return {
            ...state,
            isWarning: action.payload 
        };
...

动作

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

我现在得到：

也许this可以帮助您吗？

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);

减速机

...
    case 'SET_WARNING':
        console.log('reducer called: ', action)
        return {
            ...state,
            isWarning: action.payload 
        };
...