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

```js
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

```js
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:

```js
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;
}

```