代码之家 › 专栏 › 技术社区 › Aessandro

React组件未连接到存储

react-redux redux reactjs javascript

Aessandro · 技术社区 · 6 年前

我一直在用 this 创建以下内容。

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

我需要调度一个操作来更新状态属性(“iswarning”),该属性控制“warningmodal”的可见性,但这似乎无法将我的组件连接到存储:

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

ConfigureStore.js

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

2 回复 | 直到 6 年前

stone 6 年前

呼唤 connect() 返回包装的React组件构造函数。此代码未使用的返回值 connect 总之,它被扔掉了。

修复此问题的最小更改是保存返回值 连接 在一个新变量中,并使用它来代替 WarningModal 在导出的组件构造函数的呈现函数中:

const WarningModalContainer = connect(mapStateToProps, {
    setWarning
})(WarningModal);

…

ReactDOM.render(
        <WarningModalContainer 
            message={message} 
            withCleanup={withCleanup} 
        />,
        modal
    );

xadm 6 年前

应该有

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

通过这种方式,您可以导入Redux连接的组件进行渲染(在单独的文件中)-在您的版本中,渲染将使用原始(未连接)组件进行装载,

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