Почему я получаю сообщение об ошибке «Магазин не найден», а в свой корневой компонент уже добавлены теги провайдера?

Question

Я пытаюсь реализовать избыточность в своем приложении реакции, но если я загружаю компонент, который использует хранилище, я получаю эту ошибку:

Could not find "store" in the context of "Connect(getUserList)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(getUserList) in connect options.
▶ 27 stack frames were collapsed.
Module../src/index.js
C:/Users/rick2/Desktop/LaCasserai/project/frontend/src/index.js:8
   5 | import { provider } from 'react-redux';
   6 | import store from './store';
   7 | 
>  8 | ReactDOM.render(<provider store={store}><App /></provider>, document.getElementById('root'));
   9 | 
  10 | // If you want your app to work offline and load faster, you can change
  11 | // unregister() to register() below. Note this comes with some pitfalls.

Я попытался осмотреться, но все решения, которые я нашел, просто поместили теги провайдера вокруг корневого компонента. но, как вы можете видеть из ошибки, это уже так.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { provider } from 'react-redux';
import store from './store';

ReactDOM.render(<provider store={store}><App /></provider>, document.getElementById('root'));

serviceWorker.unregister();

store.js

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/reducerIndex';
import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';

const initialState = {};

const middleware = [thunk];

const store = createStore(rootReducer, initialState, composeWithDevTools(
    applyMiddleware(...middleware)
    )
);

export default store;

getUser.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { getUsers } from "../actions/userActions";
import PropTypes from 'prop-types';

class getUserList extends Component {

    componentDidMount() {
        this.props.getUsers();
    }

    render() {
        return (
            <p>hoi</p>
        )
    }

}

getUserList.propTypes = {
  getUsers: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
    user: state.user
});

export default connect(mapStateToProps, { getUsers })(getUserList);

Я просто сейчас тестирую, поэтому я пока не использую состояние, но оно все равно должно найти мой магазин, верно?

Answer 1

Похоже, вы импортируете неправильное имя компонента.Это Provider, а не provider.Итак, измените его на:

// import
import {Provider} from "react-redux";

//and:
ReactDOM.render(
    <Provider store={store}><App /></Provider>, 
    document.getElementById('root')
);