时间戳

首页 > 解决方案 > React 组件未连接到商店

javascript - React 组件未连接到商店

问题描述

我一直在使用它来创建以下内容。

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

我需要调度一个操作来更新控制“WarningModal”可见性的状态属性（“isWarning”），但这似乎并没有将我的组件连接到商店：

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

ConfigureStore.js

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

标签： javascriptreactjsreduxreact-redux

解决方案

应该有

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

这样，您就可以导入 redux 连接组件进行渲染（在单独的文件中） - 在您的版本中，渲染需要原始（未连接）组件进行挂载，

它可以在一个文件中完成，但不建议这样做。

推荐阅读