Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot read property 'modules' of undefined #77

Open
dzintars opened this issue Jul 25, 2020 · 2 comments
Open

Uncaught TypeError: Cannot read property 'modules' of undefined #77

dzintars opened this issue Jul 25, 2020 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@dzintars
Copy link
Owner

When calling selector before actual data are arrived o get this error.

Uncaught TypeError: Cannot read property 'modules' of undefined
    at selectors.ts:33
    at index.js:70
    at index.js:30
    at index.js:84
    at index.js:30
    at index.js:80
    at Object.selectModulesByApplicationId (index.js:30)
    at HTMLElement.mapState (component.ts:12)
    at HTMLElement.<anonymous> (index.ts:94)
    at HTMLElement.<anonymous> (index.ts:85)

If i debug the selectors i can see that at first render slices are empty. There are no applications and modules, but from the component i am calling ModuleSelectors.selectModulesByApplicationId(state, { applicationId: this.appid }) and so there is no data match for the requested appid. After data arrives, reducer updates the state and component gets re-rendered, so from UI perspective user sees the data, but in console there is this error.

My assumption is that i should handle isFetching state for the components and call the selector only when fetching is done.

@dzintars dzintars self-assigned this Jul 25, 2020
@dzintars
Copy link
Owner Author

This proves that data is not yet there at first render:

mapState(state: RootState) {
    return {
      pathname: RoutingSelectors.pathname(state),
      isApplicationsFetching: ApplicationSelectors.selectFetchState(state),
      isModulesFetching: ModuleSelectors.selectFetchState(state),
      modules:
        this.isApplicationsFetching && this.isModulesFetching
          ? ``
          : ModuleSelectors.selectModulesByApplicationId(state, { applicationId: this.appid }),
    }
  }

Probably need some HOC which monitors the data...?

@dzintars dzintars added the bug Something isn't working label Jul 25, 2020
@dzintars
Copy link
Owner Author

dzintars commented Jul 25, 2020

OOOrrrr.... passing that argument is BAD... ideally, this.appid should be represented in store like selectedApplicationId: '' and it should have it's own selector.
https://github.com/reduxjs/reselect#q-how-do-i-create-a-selector-that-takes-an-argument

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant