selectSlice returned undefined for an uninjected slice reducer のエラーに対応したメモ

概要

sliceのselectorsで定義したselectorを使用したら表題のエラーが出てしまった。
結論から言うと、reducerの名前の指定がsliceのnameとズレていたために発生したものであった。

環境

• reduxjs/toolkit": "^2.2.3"

エラーが発生する原因となったソース

messageSlice.ts

import { createSlice } from '@reduxjs/toolkit';
export const messageSlice = createSlice({
  name: 'massage',
  initialState: { text: 'hello' },
  reducers: {
    setText: (state, action: PayloadAction<string>)=>{ state.text = action.payload; },
  },
  selectors: {
    messageSelector: (state) => state.text,
  },
});
export const { messageSelector } = messageSlice.selectors;

store.ts

import { configureStore } from '@reduxjs/toolkit';
import { messageSlice  } from './messageSlice';

export const store = configureStore({
  reducer: {
    // ここで messageではなくmassageとタイポしている
    massage: messageSlice.reducer
  },
});

App.tsx

import { useSelector } from 'react-redux';
import { messageSelector } from ' messageSlice';

function App() {
  const message = useSelector(messageSelector);
  return (<div>{message}</div>);
}

修正

タイポを直したらエラーはおさまった。

store.ts

import { configureStore } from '@reduxjs/toolkit';
import { messageSlice  } from './messageSlice';

export const store = configureStore({
  reducer: {
-    massage: messageSlice.reducer
+    message: messageSlice.reducer

  },
});

対策

タイポを減らすために、パラメータを使って指定したほうが事故は減るかもしれない。

store.ts

import { configureStore } from '@reduxjs/toolkit';
import { messageSlice  } from './messageSlice';

export const store = configureStore({
  reducer: {
-    massage: messageSlice.reducer
+    [messageSlice.reducerPath]: messageSlice.reducer

  },
});

参考

Redux-toolkit createSelector

(おまけ）エラー本文

selectSlice returned undefined for an uninjected slice reducer

Error: selectSlice returned undefined for an uninjected slice reducer
    at selectSlice (http://localhost:5173/app/node_modules/.vite/deps/chunk-O4UCS54J.js?v=f7eed15d:2810:19)
    at wrapper (http://localhost:5173/app/node_modules/.vite/deps/chunk-O4UCS54J.js?v=f7eed15d:2865:22)
    at wrapper (http://localhost:5173/app/node_modules/.vite/deps/chunk-L4XXUM6S.js?v=f7eed15d:189:28)
    at memoizedSelector (http://localhost:5173/app/node_modules/.vite/deps/chunk-L4XXUM6S.js?v=f7eed15d:46:38)
    at getSnapshotWithSelector (http://localhost:5173/app/node_modules/.vite/deps/chunk-L4XXUM6S.js?v=f7eed15d:74:22)
    at mountSyncExternalStore (http://localhost:5173/app/node_modules/.vite/deps/chunk-NT24UTPT.js?v=f7eed15d:12509:28)
    at Object.useSyncExternalStore (http://localhost:5173/app/node_modules/.vite/deps/chunk-NT24UTPT.js?v=f7eed15d:13196:22)
    at useSyncExternalStore (http://localhost:5173/app/node_modules/.vite/deps/chunk-7ABS7DTB.js?v=f7eed15d:1120:29)
    at useSyncExternalStoreWithSelector3 (http://localhost:5173/app/node_modules/.vite/deps/chunk-L4XXUM6S.js?v=f7eed15d:81:23)
    at useSelector2 (http://localhost:5173/app/node_modules/.vite/deps/chunk-L4XXUM6S.js?v=f7eed15d:243:27)