无法使用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-工具包的一条线索，我想我已经走到一半了，但是现在我得到了以下内容，考虑到我的设置，这似乎很奇怪：

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

我特别建议改用API来自我们的官方Redux工具包包。默认情况下，它已经打开了该选项，并且它还将处理好默认设置您存储的其余部分。

更新

该错误听起来似乎并不是实际上将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
}