Uncaught TypeError: Cannot read properties of undefined (reading 'dispatch')

Question

I'm currently trying to use React + Typescript + Redux and I'm running into an issue. I'm trying to test the Redux Store setup via chrome devTools. I know I butchered the code (very new to Typescript) and I'm getting this error 'Uncaught TypeError: Cannot read properties of undefined (reading 'dispatch')' every time I test it. I tried declaring a global window state, installed redux-dev-tools, but still very lost.

This is what my store/index.tsx file look like:

import {
  legacy_createStore as createStore,
  combineReducers,
  applyMiddleware,
  compose,
  StoreEnhancer,
} from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import thunk from "redux-thunk";

const rootReducer = combineReducers({});

let enhancer;

if (process.env.NODE_ENV === "production") {
  enhancer = applyMiddleware(thunk);
} else {
  const logger = require("redux-logger").default;
  const composeEnhancers =
    (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
  enhancer = composeEnhancers(applyMiddleware(thunk, logger));
}

const configureStore = () => {
  return createStore(rootReducer, devToolsEnhancer({}));
};

export default configureStore;

and my types/index.d.ts:

import { StoreEnhancer } from 'redux'

export {};

declare global {
  interface Window {
    store: {};
    __REDUX_DEVTOOLS_EXTENSION__?: () => StoreEnhancer;
  }
}

And finally my src/index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import configureStore from "./store";

const store = configureStore();

if (process.env.NODE_ENV !== "production") {
  window.store = store;
};

function Root() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

I will also attach screenshots of my file setup:

And my console error:

I am open to all suggestions, thank you!

markerikson · Accepted Answer · 2022-10-14 01:27:38Z

The first issue here is that the store setup code is using outdated patterns and a lot of handwritten code. Today, you should be using our official Redux Toolkit package to write your Redux apps, and as part of that, RTK's configureStore API. It does all that same work with just a few lines:

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer
  }
})

That automatically combines reducers, adds the Redux DevTools extension setup, and adds the thunk middleware.

See our docs for guidance on setup:

As for the specific error message you're seeing... the code seems like it would run. My guess is that something is wrong with the process.env.NODE_ENV check you added and so it's not assigning window.store.

RTK also works much better with TypeScript than legacy Redux code does.

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read properties of undefined (reading 'dispatch')

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related