The initial state is visible in the DevTools, but any actions taken after the code has rendered do not show up.
In pages/_app.tsx, I have implemented the following:
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 props need to be passed before initializing the state), @Firmino Changani would be correct. However, I can't run getStore at the store because I wouldn't obtain the initial state.
Here's the content of 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;
This is the code for 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 believe we shouldn't expect the intidialTodos action triggered from getServerSideProps to appear in the actions panel of DevTools. But when I click the add button, I should see the action in DevTools and observe the newly added item in the state, correct?
The application functions correctly, the new item gets added as expected, but nothing beyond @@INIT shows up in the Redux DevTools.
I attempted the following approach, but it did not yield results:
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;
}