reactjsnext.jsredux-toolkitredux-sagaredux-devtools

Redux dev tools not working with Next.js, Redux toolkit and Redux Saga


I am trying to get Redux dev tools to work with:

The problem I have is that I cannot view the state. Sometimes it works and works more when I pin the persisted state option. I usually just get this: enter image description here

What I expect to see is this: enter image description here

Although I don't expect the action to have fired twice.

My sagas:

import { all, call, put } from 'redux-saga/effects';

import { getProfileFetch } from '../../features/profile/profileSlice';

function* getProfileDataSaga() {
  const res = yield call(() =>
    fetch('http://localhost:3000/api/profile', {
      next: { revalidate: 10 },
      method: 'GET'
    })
  );
  const profileData = yield res.json();
  yield put(getProfileFetch(profileData));
}

function* profileSaga() {
  yield all([call(getProfileDataSaga)]);
}

export default profileSaga;

My store index

import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';

import profileReducer from '../../features/profile/profileSlice';
import profileSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: {
    profile: profileReducer
  },
  middleware: [sagaMiddleware],
});

sagaMiddleware.run(profileSaga);

// 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;

export default store;

Any ideas? TIA


Solution

  • That's a next-bug where they had their internal router hook into the devtools with a fixed id of 1, overwriting normal Redux instances. I think they fixed that by now - can you update next?