How to get Redux DevTools to work with redux toolkit and next.js (with typescript)?

Question

The innitial state shows in the DevTools but nothing else, the actions taken after the code has rendered do not show up.

in pages/_app.tsx I have this

import getStore from '../store/store'

export default function MyApp({ Component, pageProps }: AppProps) { 
  const store = getStore(pageProps.initialState);
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

If it wasn't for the above setup (where I needed to pass props before initialising the state) the @Firmino Changani would be right, but I can't run getStore at the store because I wouldn't get the initial state

Here's the store

import { configureStore, ThunkAction, Action, combineReducers } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import UISlice from '@todoSlice/todoSlice'
const rootReducer = combineReducers({
  todo: UISlice,
});
export default function getStore(incomingPreloadState?: AppState) {
  const store = configureStore({
    reducer: rootReducer,
    preloadedState: incomingPreloadState,
  });
  return store;
}
export type AppState = ReturnType<typeof rootReducer>;
export type AppDispatch = ReturnType<typeof getStore>["dispatch"];
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action<string>
>; 
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;

Here's the page itself

import type { NextPage } from 'next' 
import getStore, { useAppDispatch, useAppSelector, AppState }  from '@store/store'
import   { intidialTodos } from '@todoSlice/todoSlice'


export async function getServerSideProps() {
  const store = getStore();
  await store.dispatch(intidialTodos());
  return {
    props: {
      initialState: store.getState(),
    },
  };
}
const Home: NextPage = () => {
  const dispatch = useAppDispatch();
  const categories = useAppSelector( ( state: AppState ) => state.todo.categories );
  const addTodo = () => dispatch(addTodos({name: "The one", id: 506}))
  return (
    <><button onClick={addTodo}>Add!</button> 
   .....
  )}

I think we can't expect the intidialTodos triggered from getServerSideProps to in the actions pannel of dev tools, But when I click the add button, I should see the action in the dev tools and I should see the new added item in the state, right?

The app works, the new item gets added and everything but nothing after @@INIT happens in the Redux dev tools

I tried this but did not work:

import { composeWithDevTools } from 'redux-devtools-extension';
import UISlice from '@todoSlice/todoSlice'
import {createAsyncThunk} from '@todoSlice/todoSlice'; 
const rootReducer = combineReducers({
  todo: UISlice,
});
export default function getStore(incomingPreloadState?: AppState) {
  const composeEnhancers = composeWithDevTools({ actionCreators: [createAsyncThunk], trace: true, traceLimit: 25 });
  const store = configureStore({
    reducer: rootReducer,
    preloadedState: incomingPreloadState,
    devTools: false,
    enhancers: [composeEnhancers({ realtime: true, port: 8000 })],

  });
  return store;
}

Answer 1

You have devTools set to false. I have the following setup on a Next app:

import { createLogger } from "redux-logger";
const logger = createLogger();

export function makeStore() {
  return configureStore({
    devTools: true,
    middleware: [logger],
    reducer: {/* My reducers */},
  });
}

const store = makeStore();