无法使用 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 块中，因此它是 undefined 在 else 块中。

此外，您对 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
}

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

Can't add tracing functionality in Redux with Next.js

javascript

redux

redux-devtools

redux-devtools-extension

redux-toolkit