React Toolkit Compatibility and Typescript

[jmarbutt]

I am trying to create a reactotron config for a react native application using redux-toolkit. My reactatron-config.ts is this:

import AsyncStorage from '@react-native-async-storage/async-storage';
import Reactotron from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'
import { NativeModules } from 'react-native';

// grabs the ip address
const host = NativeModules.SourceCode.scriptURL.split('://')[1].split(':')[0];

const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure({ host }) // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux())
  .connect() // let's connect!

export default reactotron

And my store.ts looks like this:

import sellSlice from './sellSlice';
import { configureStore } from '@reduxjs/toolkit';
import accountSlice from './accountSlice';
import authSlice from './authSlice';
import storeSlice from './storeSlice';
import Reactotron from '../reactatron-config'

export const store = configureStore({
  reducer: {
    auth: authSlice.reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(Reactotron.createEnhancer()),
})


// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

I am getting an error at:

getDefaultMiddleware().concat(Reactotron.createEnhancer()),

And the error is:

No overload matches this call.
  Overload 1 of 2, '(items: readonly Middleware<any, any, Dispatch<AnyAction>>[]): MiddlewareArray<[ThunkMiddleware<{ auth: authState; account: accountState; store: storeState; sell: sellState; }, AnyAction, undefined>, ...Middleware<...>[]]>', gave the following error.
    Argument of type 'StoreEnhancer<{}, {}>' is not assignable to parameter of type 'readonly Middleware<any, any, Dispatch<AnyAction>>[]'.
  Overload 2 of 2, '(...items: readonly Middleware<any, any, Dispatch<AnyAction>>[]): MiddlewareArray<[ThunkMiddleware<{ auth: authState; account: accountState; store: storeState; sell: sellState; }, AnyAction, undefined>, ...Middleware<...>[]]>', gave the following error.
    Argument of type 'StoreEnhancer<{}, {}>' is not assignable to parameter of type 'Middleware<any, any, Dispatch<AnyAction>>'.
      Types of parameters 'next' and 'api' are incompatible.
        Type 'MiddlewareAPI<Dispatch<AnyAction>, any>' is not assignable to type 'StoreEnhancerStoreCreator<{}, {}>'.
          Type 'MiddlewareAPI<Dispatch<AnyAction>, any>' provides no match for the signature '<S = any, A extends Action<any> = AnyAction>(reducer: Reducer<S, A>, preloadedState?: PreloadedState<S>): Store<S & {}, A>'.ts(2769)

What am I am missing?

[blwinters]

Maybe you already figured this out, but for future readers here's the answer. I added a TypeScript example that handles a nullability issue.