Question

尝试显示页面时出现此错误。该商店也作为上下文传递到此页面的不同组件。

Index.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import Tabs from 'testComponents/Tabs';
import Schedule from './Schedule';
import Configuration from './Configuration';
import style from './index.scss';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../../app/root.reducer';
import { createWebsocketMiddleware } from '../../middleware/websocket';


const createStoreWithMiddleware = applyMiddleware(thunkMiddleware, createWebsocketMiddleware)(createStore);
const store = createStoreWithMiddleware(rootReducer);

export class Purge extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: 'configuration'
        };
        this._onSelect = this._onSelect.bind(this);
        this._getContent = this._getContent.bind(this);
    }

    _onSelect(selected) {
        return this.setState({selected})
    }

    _getContent(selected) {
        switch (selected) {
            case 'schedule':
                return (<Schedule/>);
            case 'configuration':
                return (<Configuration/>);
            default:
                return null;
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.update !== nextProps.update) {
            if (nextProps.update === 'success') {
                toast({
                    message: 'Configuration successfully applied.',
                    flavor: 'success',
                    options: { timeOut: 5000 }
                });
            } else if (nextProps.update === 'failed') {
                toast({
                    message: 'Configuration not applied.',
                    flavor: 'error',
                    options: { timeOut: 5000 }
                });
            }
        }
    }

    render() {
        const {selected} = this.state;
        const {update} = this.props;
        return (
            <Provider store={store}>
                <div className={style.container}>
                    <DnxToast/>
                    <div className={style.header}>{'Store Settings'}</div>
                    <Tabs
                        value={'configuration'}
                        tabs={[{
                            title: 'Data Purge Schedule',
                            name: 'schedule'
                        }, {
                            title: 'Data Retention & Purge Configuration',
                            name: 'configuration'
                        }]}
                        onTabClick={this._onSelect}
                    />
                    <div className={style.content}>{this._getContent(selected)}</div>
                </div>
            </Provider>

        );
    }
}

Purge.propTypes = {
    update: PropTypes.string
};

Purge.contextTypes = {
    store: PropTypes.object
};

const mapStateToProps = state => {
    return {
        update: state.purge.get('update')
    };
};

export default connect(mapStateToProps)(Purge);

我添加了Provider并将其包装在return函数中。我是Redux的新手，不确定如何解决此问题。

我使用提供者的方式有误吗？

Answer 1

是的，这是错误的。您需要将<Provider>放在整个应用程序中，以便此连接的组件位于其中，例如（大约）：

import ConnectedPurge from "./Purge";

const store = createStore();

ReactDOM.render(
    <Provider store={store}>
        <App>
            <ConnectedPurge />
        </App>
    </Provider>
);

在此处查看示例：React-Redux docs: Basic Tutorial。

在“ Connect（Purge）”的上下文或道具中找不到“ store”

1 个答案: