reactjs - Cannot read property 'store' of undefined in Javascript class - Stack Overflow

admin管理员组

文章数量:1430027

I wrote a small convenience class to centralize all of the email validation we do across our app.

However, when I run this, I get a console error:

Cannot read property 'store' of undefined

I'm clearly missing an import here but unclear as to how I'd import store. My gut tells me I'm doing something wrong here. Getting back into web after doing mobile for the last four years so I'm a little rusty :)

Thanks

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: 
    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 [email protected]
  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);

And then the implementation in another ponent:

import EmailValidator from 'app/helpers/EmailValidator';

lower in the ponent, in a function:

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

Full error

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)

I wrote a small convenience class to centralize all of the email validation we do across our app.

However, when I run this, I get a console error:

Cannot read property 'store' of undefined

I'm clearly missing an import here but unclear as to how I'd import store. My gut tells me I'm doing something wrong here. Getting back into web after doing mobile for the last four years so I'm a little rusty :)

Thanks

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./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 [email protected]
  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);

And then the implementation in another ponent:

import EmailValidator from 'app/helpers/EmailValidator';

lower in the ponent, in a function:

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

Full error

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)

• javascript
• reactjs
• react-redux

Share Improve this question Follow edited May 20, 2019 at 22:34 Zack Shapiro asked May 20, 2019 at 21:24 Zack ShapiroZack Shapiro 7,0381919 gold badges8888 silver badges162162 bronze badges 7

• 2 I don't see any property store in this part of the code, where/what is it supposed to be? – Yannick K Commented May 20, 2019 at 21:36
• I assumed I didn't need to explicitly import store, that I could use connect and dispatch to dispatch my actions appropriately but I could be wrong here. – Zack Shapiro Commented May 20, 2019 at 21:44
• When I have loginEmailExists unmented as well as mapDispatchToProps and export default connect..., I get the store error in my console. When they're mented out, I don't get that error. So it's something there... – Zack Shapiro Commented May 20, 2019 at 21:48
• Please show the error – Gertjan Brouwer Commented May 20, 2019 at 21:50
• I added it to the original post. Thanks – Zack Shapiro Commented May 20, 2019 at 21:52

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 2

Not sure if you have setup the store correctly, or even have set it up at all. But here's an example of how you might do it:

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

Keep in mind to extend your classes with React.Component, e.g.:

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

Hope this gets you on the right track. Your dispatch and connect syntax is fine, so that is not the issue at least.

store can't be imported - it needs to be provided with <Provider/>

Make simple redux project running first.

Did you ever worked with redux?

You can't connect redux store to any class, it's a HOC - ponent enhancer.

Your EmailValidator can be a HOC, too.

本文标签： reactjsCannot read property 39store39 of undefined in Javascript classStack Overflow