configureStore type problem

[AHBruns]

So, I've been following the guides and am trying to dispatch an async thunk from another async thunk. To do this, the docs say I need to do:

// store.ts
import { sessionReducer } from "./slices/session";
import { userReducer } from "./slices/user";
export * as session from "./slices/session";
export * as user from "./slices/user";
export * as userThunks from "./thunks/user";
export * as sessionThunks from "./thunks/session";

export const store = configureStore({
  reducer: {
    session: sessionReducer,
    user: userReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Then AppDispatch should include type info for a dispatch that works with thunks. In theory I could then do something like the following:

// ./thunks/login.ts
import { createAsyncThunk } from "@reduxjs/toolkit";
import { AppDispatch, sessionThunks } from "../store";

export const login = createAsyncThunk<
  boolean,
  { email: string; password: string },
  {
    dispatch: AppDispatch;
    rejectValue: "WRONG_EMAIL_OR_PASSWORD" | "UNKNOWN";
  }
>("login", (body, thunkAPI) => {
  thunkAPI.dispatch(sessionThunks.loadSession(body));
  return true;
});

Unfortunately, this doesn't work. I get the following error:

In fact, AppDispatch doesn't even seem to know anything about thunks.

So, I guess my question is: Why isn't configureStore working as I'm expecting?

[AHBruns]

Figured it out. Needed to manually install redux (not sure how I got this far without it, tbh).

[markerikson]

@AHBruns That doesn't sound right. RTK already depends on the redux package, and in fact re-exports all types and APIs from the Redux core. You shouldn't have had to import or install anything else.

The code you're showing looks correct, so I'm not sure why there would be any issues here.

[AHBruns]

@markerikson Yeah, I'm not sure why, but the issue was definitely solved by installing redux. If it helps, I'm using yarn 2 which has all sorts of pitfalls right now. So, this might be a package manager specific thing.

[ChiaJune]

same here.
@reduxjs/toolkit version: 1.6.0-alpha.0

Although the @reduxjs/toolkit version is 1.6.0-alpha.0, but it's dependence redux is still 4.0.5

[markerikson]

Can someone put together a project that reproduces this issue? If this is specifically a problem with the alpha, I need to see this so we can fix it.

Additionally, RTK 1.6.0-alpha.0 should depend on redux@^4.1.0-alpha.0.

[ChiaJune]

I tried to reproduce the problem in codesandbox, but everything worked fine.
When I tested it locally, I found this problem seemed to have something to do with @types/react-redux.
I found @types/react-redux was automatically installed when I install react-redux.
When I remove @types/react-redux from devDependencies, everything will be fine.

[markerikson]

Yes, as of React-Redux 7.2.3, we now specifically auto-install @types/react-redux as a dependency so that people don't forget to install it. Not sure how that would have any effect on something to do with the Redux core and RTK, though.

[jabrks]

I was also seeing this error after installing the alpha. It seemed to be caused by the presence of an older version of Redux core. I managed to fix it by re-installing React-Redux.

✅ Working

npm ls redux

├─┬ @reduxjs/toolkit@1.5.1
│ └── redux@4.0.5 
└─┬ react-redux@7.2.3
  └─┬ @types/react-redux@7.1.16
    └── redux@4.0.5  deduped

❌ Broken (after installing the RTK alpha)

npm ls redux

├─┬ @reduxjs/toolkit@1.6.0-alpha.2
│ └── redux@4.1.0 
└─┬ react-redux@7.2.3
  └─┬ @types/react-redux@7.1.16
    └── redux@4.0.5

✅ Working (after re-installing React-Redux)

npm ls redux

├─┬ @reduxjs/toolkit@1.6.0-alpha.2
│ └── redux@4.1.0 
└─┬ react-redux@7.2.3
  └─┬ @types/react-redux@7.1.16
    └── redux@4.1.0 

[markerikson]

Hmm. Based on that, I'm not sure there's anything specific we can do to fix this sort of issue.

@types/react-redux depends on redux@^4.0.0. So, redux@4.1.0 qualifies, but NPM doesn't seem to have deduped things there.

[markerikson]

Listed this in the 1.6 release notes as a potential issue.

[makirby]

Just chiming in to say I ran into the exact same issue today. Gave me a few hours of headscratching.

Listed this in the 1.6 release notes as a potential issue.

Wish I'd read this yesterday. Updating react-redux sorted it out for me

[ryuker16]

I ran into this exact same issue but totally pre-loaded states on configure store.

The types for preLoadedState parameters in configureStore have changed from DeepPartial to PreLoadedState type which is much more strict on what it allows for the param(1:1 mapping now required). I wouldn't be surprised if the other types in configureStore has changed in most recent update.

[phryneas]

It was pretty much a bug on type level before - you can skip a single reducer's state, but giving a reducer "half" of it's preloaded state will not merge it with the initialState, but leave the other half undefined, leading to all kinds of possible bugs.