React 工具包和 redux-first-router

Question

我正在深入研究 React with Redux 来重写我们的产品。\n使用 Redux-Toolkit https://redux-toolkit.js.org/清除了围绕 Redux 的很多迷雾。\n然后我发现 React-Router 做了状态管理混乱，在 redux-first-router https://github.com/faceyspacey/redux-first-router中找到了解决方案。

\n\n

现在我想把这些优秀的库结合起来。但我认为我在配置中做错了什么。\n这是代码。从https://codesandbox.io/s/m76zjj924j的沙箱示例开始，我将 configureStore.js 文件更改为（为简单起见，我省略了用户减速器的代码）

\n\n

import { connectRoutes } from \'redux-first-router\';\nimport { configureStore, getDefaultMiddleware } from \'@reduxjs/toolkit\'\nimport { routePaths } from \'../routes\';\n\nconst { reducer: location } = connectRoutes(routePaths);\n\nconst {\n    middleware: routerMiddleware,\n    enhancer: routerEnhancer,\n    initialDispatch\n  } = connectRoutes(routePaths, { initialDispatch: false });\n\nexport default function configureRouteStore() {\n  const store = configureStore({\n    reducer: {\n\n      location: location\n    },\n    middleware: [...getDefaultMiddleware(), routerMiddleware],\n    enhancers: (defaultEnhancers) => [routerEnhancer, ...defaultEnhancers]\n  })\n  initialDispatch();\n  return store;\n}\n

\n\n

但现在每次更新route = Redux store 的更改时，我都会在浏览器中收到异常：

\n\n

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

\n\n

我可以看到，如果路由具有定义为这样的“thunk”属性，则这源于路由定义PROFILE: { path: "/profile/:username", thunk: fetchUserData }：

\n\n

如果我将 thunk 属性更改为可序列化值（或将其删除），错误就会消失。\n不知何故，现在 thunk 被添加到更新路径的操作的有效负载中。什么...？

\n\n

该怎么办？好的，我可以让它与传统的 Redux 设置一起工作，但由于我是 redux 工具包的忠实粉丝，这对我来说会很方便，也许还有更多的人可以让它与工具箱一起工作。

\n

Answer 1

我是 Redux 维护者和 Redux Toolkit 的创建者。

根据该错误消息并阅读 Redux-First-Router 源代码，看起来该库确实正在尝试在 Redux store 中存储 thunk 函数。这是一个问题，因为我们特别指示用户永远不要将不可序列化的值（例如函数）放入 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向可序列化检查中间件添加了一个选项，以允许忽略状态内的特定键路径。

再次请注意，这纯粹是解决行为不当的库的逃生口，不应用作常规方法。