無法使用 Next.js 在 Redux 中添加跟蹤功能

Question

我想在 Redux 中將跟蹤功能添加到我的開發工具中：

但是我這樣做時：

export default () => {
  let store;
  const isClient = typeof window !== 'undefined';
  if (isClient) {
    const { persistReducer } = require('redux-persist');
    const storage = require('redux-persist/lib/storage').default;
    const persistConfig = {
      key: 'root',
      storage,
      stateReconciler: autoMergeLevel2,

      whitelist: ['users', 'ui'] // place to select which state you want to persist
    };

   ******composeEnhancers******

    var composeEnhancers =
      typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
          })
        : compose;

    composeEnhancers = composeWithDevTools({
      actionCreators,
      trace: true,
      traceLimit: 25
    });

    store = createStore(
      persistReducer(persistConfig, rootReducer),
      composeEnhancers(
        applyMiddleware(thunkMiddleware, createLogger({ collapsed: false }))
      )
    );

  ******composeEnhancers******

    store.__PERSISTOR = persistStore(store);
  } else {
    store = createStore(
      rootReducer,
      composeEnhancers(
        applyMiddleware(thunkMiddleware, createLogger({ collapsed: false }))
      )
    );
  }
  return store;
};

我收到以下錯誤...

Unhandled Runtime Error
TypeError: composeEnhancers is not a function

Call Stack
module.exports../store/index.js.__webpack_exports__.default
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js (499:84)
createStore
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (95:20)
initStore
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (98:20)
Object.<anonymous>
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (137:33)
step
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (56:23)
Object.next
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (37:53)
<unknown>
file:///Users/antonio-pavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-redux-wrapper/lib/index.js (31:71)
new Promise
<anonymous>

提前致謝！

更新

跟隨redux-toolkit的一個線程，我想我已經完成了一半，但現在我得到以下內容，考慮到我的設置，這似乎很奇怪：

Error: "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers

這是我更新的商店：

import { combineReducers } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import { createLogger } from 'redux-logger';

/* imported reducers */
import ui from './reducers/ui/index';
import users from './reducers/users/index';

import thunkMiddleware from 'redux-thunk';
import { persistStore } from 'redux-persist';

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import { persistReducer } from 'redux-persist';

var reducers = combineReducers({
  users: users,
  ui: ui
});

export default () => {
  let store;
  const isClient = typeof window !== 'undefined';
  if (isClient) {
    var storage = require('redux-persist/lib/storage').default;
    var persistConfig = {
      key: 'root',
      storage,
      stateReconciler: autoMergeLevel2,

      whitelist: ['users', 'ui'] // place to select which state you want to persist
    };

    var persistedReducer = persistReducer(persistConfig, reducers);

    store = configureStore({
      reducer: persistedReducer,
      middleware: [thunkMiddleware, createLogger()]
    });
    store.__PERSISTOR = persistStore(store);
  } else {
    store = configureStore({
      reducer: persistedReducer,
      middleware: [thunkMiddleware, createLogger()]
    });
  }
  return store;

Answer 1

我特別建議從我們的官方 Redux 工具包 package 切換到使用configureStore API 。 默認情況下，它已經啟用了此選項，並且它將處理設置您商店的 rest 以及良好的默認值。

更新

該錯誤聽起來好像您實際上並沒有將reducer字段傳遞給configureStore 。

根據您更新的代碼，我很確定這個else塊是錯誤的：

    store = configureStore({
      reducer: persistedReducer,
      middleware: [thunkMiddleware, createLogger()]
    });

根據您的邏輯， persistedReducer僅存在於if塊中，因此它在else塊中undefined 。

此外，您對middleware arg 的使用目前忽略了開發檢查中間件的所有自動使用。

我建議將其重寫為：

export default () => {
  let rootReducer;
  const isClient = typeof window !== 'undefined';
  if (isClient) {
    // redux-persist setup logic here
    rootReducer = persistReducer(persistConfig, reducers);
  } else {
    rootReducer = reducers;
  }

  const store = configureStore({
    reducer: rootReducer,
     middleware: [...getDefaultMiddleware(), createLogger()]
  })

  return store
}