无法读取属性'；商店'；Javascript类中未定义的

我编写了一个小型便利类来集中我们在应用程序中进行的所有电子邮件验证

但是，当我运行此命令时，会出现控制台错误：

无法读取未定义的属性“存储”

我显然错过了一个导入，但不清楚如何导入

存储

。我的直觉告诉我我做错了什么。在做了四年手机之后，我又回到了网络，所以我有点生疏：）

谢谢

import React from 'react';
import { connect } from 'react-redux';
import { checkEmail } from 'app/auth/redux/actions.js';

class EmailValidator extends React.Component {
  constructor(props) {
    super(props);
    // via: https://stackoverflow.com/a/13178771/602210
    this.regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
  }

  // Tests whether the email is in a valid format like name@example.com
  emailIsValid(email) {
    return this.regex.test(email);
  }

  * loginEmailExists(email) {
    const { emailIsTaken } = yield this.props.checkEmail(email);
    return emailIsTaken;
  }
}

const mapDispatchToProps = dispatch => {
  return {
    checkEmail: (email) => dispatch(checkEmail(email)),
  };
};

export default connect(null, mapDispatchToProps)(EmailValidator);

然后在另一个组件中实现：

import EmailValidator from 'app/helpers/EmailValidator';

组件下部，在功能中：

const validator = new EmailValidator();
if (!validator.emailIsValid(email)) { ... } // throws error below

完全错误

connectAdvanced.js:123 Uncaught TypeError: Cannot read property 'store' of undefined
    at new Connect (connectAdvanced.js:123)
    at eval (index.js:149)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
Connect(EmailValidator) @ connectAdvanced.js:123
(anonymous) @ index.js:149
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20233
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20284
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20283
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

react-dom.development.js:289 Uncaught TypeError: Cannot read property 'store' of undefined
    at new Connect (connectAdvanced.js:123)
    at eval (index.js:149)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)

---

不确定是否正确设置了存储，甚至根本没有设置。但这里有一个例子可以说明如何做到这一点：

// src/store.js
import { createStore } from 'redux'
import reducer from './reducers'

const enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ &&window.__REDUX_DEVTOOLS_EXTENSION__() // Redux DevTools, a must

const store = createStore(reducer, enhancer)

export default store

---

希望这能让你走上正轨。您的dispatch and connect语法很好，因此这至少不是问题。

无法导入store

-它需要提供

首先让简单的redux项目运行

你和redux一起工作过吗

您不能

将
redux存储连接到任何类，它是一个HOC组件增强器

您的
EmailValidator
也可以是一个HOC。
我在这部分代码中没有看到任何属性
store
，它应该在哪里/应该是什么？我假设我不需要显式导入
store
，我可以使用
connect
和
dispatch
适当地调度我的操作，但我可能在这里出错。当我有
loginEmailExists
未注释以及
mapDispatchToProps
和
导出默认连接…
时，我的控制台中会出现
存储
错误。当他们被注释掉的时候，我没有得到那个错误。所以这是有点…请显示错误我把它添加到原来的帖子。感谢这是一个我正在添加到现有react项目中的类，它可以工作，并且有一个
提供程序
、sagas等等。是的，我曾经使用过redux，我只是从来没有尝试过实现这种帮助器类。你能给我一个如何重构我的类以使其正确工作的想法吗？HOC在中有描述，许多HOC可以是
compose
d（f.e.recompose project），你可以创建一个钩子…谢谢Yannick，我更新了我的原始帖子。我有一家长期经营的
商店。我只是想让这个部件运转起来。不知道接下来会发生什么
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import store from './store'
import {Provider} from 'react-redux'

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

, document.getElementById('root'));
registerServiceWorker();

import React from 'react';
...
class EmailValidator extends React.Component {
...