问题标签 [redux-middleware]

我正在尝试创建我的第一个 Redux 中间件来处理与聊天服务器的持久 Socket.IO 连接。Redux 应用程序只应在用户登录后创建 Socket.IO 连接。store.user.id在 Redux 商店中，null如果用户已登录，则不会。

问题：如何创建 Socket.IO 仅在用户登录时连接，在用户注销时断开连接？

在下面的示例代码中，立即建立了 Socket.IO 连接。

系统环境

• 反应-dom@16.13.1
• react-redux@7.2.0
• 反应@16.13.1
• redux@4.0.5
• 节点 v14.0.0

我正在尝试在我的 React Redux Electron 应用程序中创建一个简单的 Redux 中间件，该应用程序使用 Thunk 和connected-react-router.

在myMiddleware.js中，我们需要访问 Redux 存储和dispatch函数来发送一些操作。但是，getState如dispatch下面undefined的代码所示。

在自定义 Redux 中间件中访问它们的正确方法是什么？

Github 仓库： https ://github.com/nyxynyx/accessing-store-dispatch-from-redux-middleware

中间件/myMiddleware.js

store.js

index.js

使用

• 连接反应路由器@6.8.0
• 反应-dom@16.13.1
• react-redux@7.2.0
• react-router-dom@5.1.2
• 反应路由器@5.1.2
• 反应@16.13.1
• redux-localstorage@0.4.1
• redux-thunk@2.3.0
• redux@4.0.5
• 节点 v14.0.0

我正在使用 redux-toolkit 实现反应应用程序，并且在从 firestore 获取数据时出现此类错误。

在路径中的操作中检测到​​不可序列化的值：payload.0.timestamps.registeredAt

在路径中的操作中检测到​​不可序列化的值：payload.0.profile.location。

前者的数据类型是firebase.firestore.Timestamp，后者是GeoPoint。
我认为两者都可能无法序列化，但我想获取这些数据并将它们展示给用户。
我怎样才能克服这些错误？
根据这个问题，我可能会这样写；

但是我不确定它是否安全，即使是这样，我也不知道如何编写路径动态方式，因为我的有效负载是数组。

如果有人提供一些线索，我将不胜感激。

我们为什么要做这个：

而不是更简单的东西

Redux 团队以这种方式设计中间件有什么优势吗？如果我们拆分中间件功能，我们可以利用一些功能吗？

在我自己的应用程序中，我定义了一个simplerMiddleware()可以从第二种形式转换为第一种形式的函数，它似乎运行良好。

为什么是三个箭头函数？

注意：我不是在问什么是柯里化，或者为什么在函数式编程中存在柯里化，或者柯里化的一般好处是什么；Redux 设计者选择这个签名而不是更简单的三参数函数有什么特别的原因吗？

我在我的 reactjs 项目中使用 redux 商店。我的 redux 工作正常，但是当我刷新浏览器页面时，我的 redux 商店变空了。有什么办法可以避免这种情况。

我想创建一些中间件来检查令牌 expires_at 字段，如有必要，刷新令牌并更新令牌字段的状态。

我使用了 redux 工具包来创建 redux 功能，并使用了切片。我有一个切片，它将使用令牌数据更新状态，这适用于初始令牌的回调。

创建中间件时，我无法调用切片，因此状态保持不变。

作为没有 api 调用的简单峰值：

我希望在调用中间件时，第一遍 hasBreachedThreshold() 返回 true，并且调度方法将调用切片缩减器并更新状态。任何进一步的运行都会过去，因为 hasBreachedThreshold() 将返回 false - 无论如何都会有一段时间。

但发生的情况是 hasBreachThreshold 总是返回 false，因为状态永远不会更新，从而导致无限循环。

中间件配置正确并被调用。expires_at 值是从状态中提取的。hasBreachThreshold() 已经过彻底测试并且行为正确。

作为 React / Redux 的新手，我希望我对如何以及何时使用 dispatch 的理解是错误的。我以为我可以像在组件中那样使用调度，不是这样吗？还是我要这样做完全错误的方式？

我在我的actions.js文件中定义了一个 thunk：

当我从一个 React 组件调度它时，一切都像一个魅力。在我的component.js我们有这样的事情：

但是，当我尝试从中间件使用相同的 thunk 时，如下所示：

我收到此错误：

该错误正在处理处理操作类型的中间件myThunkType：

因为它不能“返回下一个动作”。任何提示我做错了什么？

编辑：在调试中检查，我发现调度的 thunk 在它到达中间件时看起来像这样：https ://imgur.com/s7AS8eD

使用 reduxjs-toolkit，我定义了我的商店和中间件，如下所示：

但是我只想将此中间件应用于某些减速器，而不是全部。具体来说，我想将 websocket 中间件应用到某些 reducer，而在其他情况下，我正在调用 API，并且不需要这个 websocket 中间件。

似乎添加另一个商店来执行此操作是一种反模式。

那么我怎样才能只为某些减速器应用中间件呢？

我已经创建了一个 Reducer，createSlice并希望在每次 adispatch与 reducer 的一种情况匹配时重置|修改该切片的状态。

具体来说，我希望在每次请求之前重置一个 ErrorSlice (ErrorReducer)，以便删除旧错误，只显示新错误。我可能可以在每种情况下重置状态，但我想在一个地方为所有情况解决这个问题

对于我的 react 应用程序，我构建了许多自定义中间件并将它们传递到applyMiddleware(). 因为我有这么多，redux 存储文件看起来有点拥挤。applyMiddleware()将它们全部传递到函数中或将它们导入到函数中的单独文件中，然后将该函数传递到函数中applyMiddleware()以保持干净，这是一个好习惯吗？