Javascript 找不到“；商店「；在「；连接（MyComponent）“？重复反应问题

我正在尝试使用redux和react构建我的第一个小型web应用程序，我正在学习一门课程，并完全按照他所做的去做，这样我就可以学习如何进行设置，但我的控制台出现了一个错误：

Could not find "store" in the context of "Connect(UserList)"

现在我将解释我所做的工作，我制作了这个简单的文件夹结构：

reactapp --- src --- actions ( empty for now )

                 --- components --- app.js
                                --- userlist.js

                 --- reducers   --- index.js
                                --- userlist.js

                 index.js

这是我的smiple reducers/userlist文件：

export default function() {
  return [
    { id: 1, nom: "Taoufiq BENALLAH", active: "NON", role: "Internship" },
    { id: 2, nom: "Mounia Drari", active: "OUI", role: "Developer" },
    { id: 3, nom: "Jaouhar Alaoui", active: "NON", role: "Internship" },
    { id: 4, nom: "ILyass LAZ", active: "OUI", role: "Technical Expert" }
  ];
}

这是我的reducers/index.js文件：（我的导入设置正确）

这是我的组件用户列表：

import React, { Component } from "react";
import { connect } from "react-redux";

class UserList extends Component {
   render() {
     return <div>{this.props.users}</div>;
   }
}

function mapStateToProps(state) {
   return {
     users: state.users
   };
}

export default connect(mapStateToProps)(UserList);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类UserList扩展组件{
render（）{
返回{this.props.users}；
}
}
函数MapStateTops（状态）{
返回{
用户：state.users
};
}
导出默认连接（MapStateTops）（用户列表）；

这是我的app.js

import React, { Component } from "react";
import UserList from "./userlist";

class App extends Component {
  render() {
    return (
      <div>
        <UserList />
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/UserList”导入用户列表；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

最后是我的src/index.js，和往常一样：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/app";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/components/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(

任何帮助都将不胜感激。
您需要包装在
提供者中，并添加商店作为道具。请参阅。在app.js中：

<Provider store={store}>
  <div>
    <UserList />
  </div>
</Provider>


从“redux”导入{createStore、applyMiddleware、combinereducer}；
从“redux logger”导入记录器
const store=createStore（rootReducer、applyMiddleware（logger））；
ReactDOM.render（，document.getElementById（'root'））；

您需要在Provider中包装应用程序，并在index.js中添加商店作为道具

<Provider store={store}>
  <div>
    <UserList />
  </div>
</Provider>

import { createStore, applyMiddleware, combineReducers } from 'redux';
import logger from 'redux-logger'

const store = createStore(rootReducer, applyMiddleware(logger));

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