Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Getting issue in middleware of configureStore when update redux-toolkit to 2.0.1

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat([
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      })
    ])
})

Here, I got the error

TS2322: Type ‘(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<[ThunkMiddleware<any, UnknownAction>, …Middleware<{}, any, Dispatch>[]]>’ is not assignable to type ‘(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<Middlewares>’.
Type ‘Tuple<[ThunkMiddleware<any, UnknownAction>, …Middleware<{}, any, Dispatch>[]]>’ is not assignable to type ‘Tuple<Middlewares>’.
Type ‘[ThunkMiddleware<any, UnknownAction>, …Middleware<{}, any, Dispatch>[]]’ is not assignable to type ‘Middlewares’.
Type ‘ThunkMiddleware<any, UnknownAction> | Middleware<{}, any, Dispatch>’ is not assignable to type ‘Middleware<{}, any, Dispatch>’.
Type ‘ThunkMiddleware<any, UnknownAction>’ is not assignable to type ‘Middleware<{}, any, Dispatch>’.
Types of parameters ‘next’ and ‘next’ are incompatible.
Type ‘unknown’ is not assignable to type ‘T’.
‘T’ could be instantiated with an arbitrary type which could be unrelated to ‘unknown’.
48 | export const store: AppStore = configureStore({
49 | reducer: rootReducer,
50 | middleware: (getDefaultMiddleware) =>
| ^^^^^^^^^^
51 | getDefaultMiddleware({
52 | serializableCheck: false,
53 | immutableCheck: false

I have tried enhancers(getDefaultEnhancers) but I didn’t get any proper solution for this specific code.

Tags:

2

Answers


  1. 0

    Type ‘Tuple<[ThunkMiddleware<any, UnknownAction>, …Middleware<{},
    any, Dispatch>[]]>’ is not assignable to type ‘Tuple<Middlewares>’.

    You are passing an array to the getDefaultMiddleware.concat method when you should just pass the middleware(s) directly.

    const stateSyncMiddleware = createStateSyncMiddleware({
  channel: "ketchcloth",
  broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
  blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
});

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat(
      stateSyncMiddleware,
      /* other middlewares */
    );
});

    Or spread the array into .concat if it’s still really what you want to use.

    const stateSyncMiddleware = createStateSyncMiddleware({
  channel: "ketchcloth",
  broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
  blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
});

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat(...[stateSyncMiddleware, /* other middlewares */])
});
    Login or Signup to reply.
  2. 0

    This is the correct way to implement/configure the React Redux store in the React JS application. You can read more about React Redux from its official documentation. And redux-state-sync documentation. This redux-state-sync – plugin is not updated for 2 years. Might be it does not support the least Redux version.

    Option 1:

    import {
  createStateSyncMiddleware,
  initMessageListener,
} from "redux-state-sync";
const config = {
    channel: "ketchcloth",
    broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
    blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
};
const middlewares = [createStateSyncMiddleware(config)];

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
  serializableCheck: false,
  immutableCheck: false
}).concat(middlewares),
  devTools: process.env.NODE_ENV !== 'production',
  preloadedState,
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers({
      autoBatch: false,
    }).concat(batchedSubscribe(debounceNotify)),
})

    Option 2:

    const config = {
    channel: "ketchcloth",
    broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
    blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
};
const middlewares = [createStateSyncMiddleware(config)];
const store = createStore(rootReducer, {}, applyMiddleware(...middlewares));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search