Не удается прочитать свойство 'store' из неопределенного в классе Javascript

Question

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

Однако, когда я запускаю это, я получаю ошибку консоли:

Не удается прочитать свойство 'store' из неопределенного

Я явно пропускаю импорт, но неясно, как импортировать store. Моя интуиция говорит мне, что я делаю что-то не так здесь. Вернувшись в интернет после работы с мобильными устройствами в течение последних четырех лет, я немного подзабыл :)

Спасибо

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)

Answer 1

store не может быть импортировано - необходимо указать <Provider/>

Сначала запустите простой проект Redux.

Вы когда-нибудь работали с редуксом?

Вы не можете connect редуцировать хранилище ни к какому классу, это - HOC-компонентный усилитель.

Ваш EmailValidator тоже может быть HOC.

Answer 2

Не уверен, правильно ли вы настроили хранилище или даже настроили его вообще.Но вот пример того, как вы можете это сделать:

// 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

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

Имейте в виду, чтобы расширить ваши классы с помощью React.Component, например:

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

Надеюсь, это вас заинтересуетна правильном пути.Ваш синтаксис отправки и подключения в порядке, так что, по крайней мере, это не проблема.