React 工具包和 redux-first-router

Question

我正在深入研究 React with Redux 以重寫我們的產品。 使用 Redux-Toolkit https://redux-toolkit.js.org/清除了許多圍繞 Redux 的迷霧。 然后我發現 React-Router 把狀態管理弄得一團糟，在 redux-first-router https://github.com/faceyspacey/redux-first-router找到了解決方案。

現在我想結合這些優秀的庫。 但我認為我在配置上做錯了。 這是代碼。 從https://codesandbox.io/s/m76zjj924j上的沙箱示例開始，我將 configureStore.js 文件更改為（為簡單起見，我省略了用戶減速器的代碼）

import { connectRoutes } from 'redux-first-router';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { routePaths } from '../routes';

const { reducer: location } = connectRoutes(routePaths);

const {
    middleware: routerMiddleware,
    enhancer: routerEnhancer,
    initialDispatch
  } = connectRoutes(routePaths, { initialDispatch: false });

export default function configureRouteStore() {
  const store = configureStore({
    reducer: {

      location: location
    },
    middleware: [...getDefaultMiddleware(), routerMiddleware],
    enhancers: (defaultEnhancers) => [routerEnhancer, ...defaultEnhancers]
  })
  initialDispatch();
  return store;
}

但是現在每次更新 route = Redux store 時，我都會在瀏覽器中收到異常：

index.js:1 A non-serializable value was detected in the state, in the path: `location.routesMap.PROFILE.thunk`. Value: dispatch => {
  dispatch(USER_DATA_LOADED({
    avatar: null
  }));
  const avatar = `https://api.adorable.io/avatars/${Math.random()}`;
  setTimeout(() => {
    // fake async call
    dispatch(USER_… 
Take a look at the reducer(s) handling this action type: HOME.

我可以看到這源於路由定義，如果路由有一個 'thunk' 屬性定義如下： PROFILE: { path: "/profile/:username", thunk: fetchUserData } ,

如果我將 thunk 屬性更改為可序列化的值（或刪除它），錯誤就會消失。 現在以某種方式將 thunk 添加到操作的有效負載以更新路徑。 什么...？

該怎么辦？ 好的，我可以讓它與傳統的 Redux 設置一起工作，但因為我是 redux 工具包的忠實粉絲，它對我來說會很甜蜜，也許還有更多的人可以讓它與工具箱一起工作。

Answer 1

我是 Redux 維護者和 Redux Toolkit 的創建者。

根據該錯誤消息並閱讀 Redux-First-Router 源代碼，看起來該庫確實試圖將 thunk 函數存儲在 Redux store 中。 這是一個問題，因為我們特別指示用戶永遠不要將不可序列化的值（如函數）放入 state 或 actions 中。

默認情況下，Redux Toolkit 添加了一個“可序列化的狀態不變中間件” ，如果在狀態或動作中檢測到​​不可序列化的值，它會警告您，以幫助您避免意外犯此錯誤。

可以將一些選項傳遞給getDefaultMiddleware()以自定義這些中間件的行為。 目前有一個ignoredActions選項，但我認為我們沒有選擇忽略狀態樹的特定部分。 包含的redux-immutable-state-invariant中間件確實有一個ignore狀態部分的選項，所以也許我們可以添加這種方法。

我添加了https://github.com/reduxjs/redux-toolkit/issues/319來看看我們是否可以添加這樣的選項。

同時，您可以通過調用getDefaultMiddleware({serializableCheck: false})來關閉中間件。

更新

我剛剛發布了Redux Toolkit v1.2.3 ，它向可序列化檢查中間件添加了一個ignoredPaths選項，以允許忽略狀態中的特定鍵路徑。

再次請注意，這純粹是為了解決行為不端的庫而采取的逃避措施，不應將其用作常規方法。