无法使用 Next.js 在 Redux 中添加跟踪功能

Question

我想将tracing functionality 添加到我在 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

我特别推荐改用the configureStore API from our official Redux Toolkit package。它已经默认打开了这个选项，它也会用良好的默认设置来处理你商店的其余部分。

更新

该错误听起来好像您实际上并未将reducer 字段传递给configureStore。

根据您更新的代码，我很确定这个 else 块是错误的：

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

根据您的逻辑，persistedReducer 仅存在于 if 块中，因此它在 else 块中是 undefined。

此外，您对 middleware 参数的使用目前忽略了开发检查中间件的所有自动使用。

我建议将其重写为：

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
}