问题标签 [redux-middleware]

问题很简单，

我如何在不生产时添加 react 或 redux 中间件（如 Logger）。

我不希望用户能够在控制台选项卡中看到日志信息。

有没有办法在同一页面上的多个 React/Redux 实例之间共享 redux 存储？

我的网页内容由 CMS 提供。我想在页面上包含几个 React 小部件，但问题是每个实例都有自己的商店。

举例说明：在 CMS 对网页进行配置后，它将在页面中提供锚 div，如下所示：

我听说过通过中间件发布操作的方法，但我发现的大多数解决方案都是通过网络连接发布它们，我希望它们保持在同一页面上。

有人能指出我正确的方向吗？

所以我的场景是这样的：

1. 我有两种类型的请求：不需要授权信息的“公共”请求和需要授权信息的“授权”请求。
2. 对于授权请求，在实际发送每个请求之前，我必须将身份验证信息放入标头中。请求完成后，从服务器返回的新访问令牌应该保存到状态中。

所以我的很多动作目前看起来是这样的：

我做了一些研究，有两种可能的方法来做到这一点：Axios 拦截器，或者编写一个 Redux 中间件。

我觉得 Axios 拦截器，至少对于响应部分来说，并不是最好的解决方案，因为它只是对响应数据做一些事情，而我需要在完成更新新的访问令牌后调度另一个动作，并且我不想导出商店来手动调度我的操作，这是一种反模式。（正如我提到的流程是：将 auth info 放入 headers => 发送请求 => 如果成功，则将新的 access-token 保存到 Redux 存储以供以后使用，然后调度其他操作；如果失败，进行一些错误处理）。

然后我找到了这个库，但我认为我太笨了，无法理解文档：

https://github.com/svrcekmichal/redux-axios-middleware

有人可以给我一个如何做到这一点的例子吗？使用该库和从头开始编写自定义中间件对我来说都很好。谢谢！

Redux 存储中间件是责任链设计模式的一个例子吗？如果不是，它使用什么设计模式？

我想知道是否有办法在商店创建后注入 Redux 商店中间件？

我想要类似的东西：

以类似的方式，我们可以在商店创建后使用replaceReducer https://redux.js.org/api-reference/store#replaceReducer即时替换 root reducer 。

我正在使用 Redux 开发 Flutter。

当用户启动应用程序时，我想Redux自动dispatch将action. 此操作将使Navigator推送不同的路由依赖。

Flutter 开发人员提供的这个片段使用.GlobalKey来使用.Navigatormiddleware

在此之后，我按如下方式组织我的代码：

main.dart

中间件.dart

这是我得到的错误

[ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter ( 2544): NoSuchMethodError: The method 'pushNamed' was called on null. E/flutter ( 2544): Receiver: null E/flutter ( 2544): Tried calling: pushNamed("/register")

这意味着action已成功发送，但是currentState的navigatorKey是null。

我在这里想念什么？

请注意，我知道这个看似相似的问题并不真正适用于我的问题。即使我将main.dart和middleware.dart合并到一个文件中，它仍然不起作用。

我正在使用redux-cookies-middleware，在那里我可以通过只是name和valuecookie。但是如果我需要添加path我应该如何通过呢？

{ session: { name: 'session' // name of the cookie in which the value of session will be synced }, 'auth.token': { name: 'auth_token' // name of the cookie in which the value of auth.token will be synced } }

我是使用 redux-pack 的新手，但喜欢 promise 方法真正清理代码并使每一步都非常清晰的方式。但是，我遇到了一个问题，承诺似乎消失并且错误被抛出。我的代码如下所示：

动作.js

服务.js

减速器.js

但是，当我运行此代码时，触发操作时出现以下错误：

我已经使用控制台输出对代码进行了检测，并且可以看到以下步骤直接发生在错误之前：

我在减速器的启动函数中也有一些预期的输出，并且从未被调用过。在上面的“登录”是 React 组件，我可以看到它发出调用，道具具有预期的状态，并且登录调用被调度。然后我看到操作调用服务，获取生成的承诺并构建完整的操作。调用reducer 并且状态看起来如预期，动作类型如预期但动作的承诺部分未定义，我怀疑这可能是导致对react-pack处理程序的调用引发错误的原因。欢迎任何关于尝试什么或在哪里寻找的建议！

使用 redux-persist 5.10.0。

使用官方文档对其进行配置后，它运行良好：

和：

正如您从我的 configureStore.js 文件中看到的那样，我有一个用于 axios 的自定义中间件。我正在使用 JWT 进行身份验证。该中间件将检查一个名为的操作常量RECEIVE_LOGIN，以便它可以将返回的令牌分配给我的 axios 实例的默认标头：

但是由于 redux-persist，我无法从 action.type 中获取我的自定义类型 - RECEIVE_LOGIN - 我得到的是persist/PERSIST，然后是persist/REHYDRATE。我什至找不到我的自定义类型action。

我查了一下，但找不到任何带有自定义中间件的示例。

所以我的问题是，如何redux-persist与自定义中间件一起使用？

对于我的 react-native 应用程序，我需要确保在每个 fetch 请求到服务器之前，应该执行下面的用例

-> 检查保存到 redux 的令牌的过期日期。

--> 如果令牌没有过期，应用程序继续fetch向服务器请求

--> 如果令牌过期，应用程序会立即向用户发出新请求，refresh token而不会让用户知道。成功刷新令牌后，应用程序继续fetch向服务器请求

我尝试用 实现中间件redux-thunk，但我不知道它是否是好的设计。我只需要有经验的人redux就react我的中间件代码给我反馈。

这就是我通过调度checkTokenAndFetch- 动作创建器向服务器发出请求的方式。

这是动作创建者 - 位于我所在checkTokenAndFetch的 authActions.js 文件中actions

这是我在令牌过期的情况下调用isTokenExpired的refreshToken函数，位于另一个名为 authServices.js 的文件中。

以及我fetchForUFS在 authServices.js 中的函数，用于在完成令牌检查（刷新）内容后调用服务器。

我已经阅读了大量的redux-thunk,redux-promise和middleware文档，但我不确定我是否真正实现了中间件逻辑？