Cannot read property 'store' of undefined in Javascript class

Question

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.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);

And then the implementation in another component:

import EmailValidator from 'app/helpers/EmailValidator';

lower in the component, 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 don't see any property `store` in this part of the code, where/what is it supposed to be? — Yannick K, May 20 '19 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, May 20 '19 at 21:44
When I have `loginEmailExists` uncommented as well as `mapDispatchToProps` and `export default connect...`, I get the `store` error in my console. When they're commented out, I don't get that error. So it's something there... — Zack Shapiro, May 20 '19 at 21:48
All application should be wrapped with Provider with store property set. It looks like it hasn't been done here. — Valerii, May 20 '19 at 22:04
Component doesn't extends React.Component. Where is render() function? — Valerii, May 20 '19 at 22:06

Yannick K · Accepted Answer · 2019-05-20T22:18:32.970

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.

Thanks Yannick, I've updated my original post. I have a `store` that's long been working. I've just been trying to get this component going. Not sure what's up from here — Zack Shapiro, May 20 '19 at 22:36

score 0 · Answer 2 · answered May 20 '19 at 22:05

0

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 - component enhancer.

Your EmailValidator can be a HOC, too.

answered May 20 '19 at 22:05

xadm

8,219
3
14
25

This is a class I'm adding to an existing react project that works and has a `Provider`, sagas, etc. Yes I've worked with redux, I've just never tried to implement this kind of a helper class. Can you give me an idea of how to refactor my class to make this work correctly? – Zack Shapiro May 20 '19 at 22:06
HOC's are described in [docs](https://reactjs.org/docs/higher-order-components.html), many HOCs can be `compose`d (f.e. recompose project), you can create a hook ... – xadm May 20 '19 at 22:24

Cannot read property 'store' of undefined in Javascript class

2 Answers2