Не удалось найти "store" ни в контексте, ни в подпорках "Connect (Purge)"

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

Я добавил провайдера и включил его в функцию возврата. Я новичок в Redux и не знаю, как решить эту проблему.

Я неправильно использую провайдера?

Answer 1

Да, это неправильно. Вам нужно поместить <Provider> вокруг всего приложения, чтобы этот подключенный компонент был внутри него, например (приблизительно):

import ConnectedPurge from "./Purge";

const store = createStore();

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

См. Примеры здесь: Документация React-Redux: базовое руководство .