问题标签 [redux-thunk]

我用 React 和 Redux 开发了一个小型的独立网络应用程序，它托管在自己的网络服务器上。我们现在想将这个应用程序的大部分部分重用/集成到另一个 React/Redux Web 应用程序中。

从理论上讲，这应该可以很好地工作，因为我所有的 React 组件、reducer 和大多数动作创建器都是纯的。但我有一些动作创建者返回取决于应用程序状态的 thunk。他们可能会分派异步或同步操作，但这不是这里的问题。

假设我的根减速器看起来像这样：

而我最复杂的动作创建者依赖于许多状态切片（幸运的是只有少数几个）：

现在的问题是我的动作创建者希望一切都在状态对象的根目录中。但是，如果我们想将此应用程序集成到另一个 redux 应用程序中，我们必须使用自己的密钥安装我的 appReducer：

这显然会破坏我返回 thunk 并需要读取应用程序状态的动作创建者，因为现在所有内容都包含在“myApp”状态切片中。

最近几天我做了很多研究并思考如何正确解决这个问题，但似乎我是第一个尝试将基于 Redux 的应用程序集成到另一个基于 Redux 的应用程序中的人。

到目前为止想到的一些技巧/想法：

• 创建我自己的 thunk 类型，这样我就可以instanceof在自定义 thunk 中间件中进行检查，并使其传递给我的 thunk 一个自定义getState函数，然后该函数将返回正确的状态切片。
• 用它自己的密钥安装我的根减速器，并使我的 thunk 依赖于该密钥。

到目前为止，我认为最好的方法是创建我自己的自定义中间件，但我对其他应用程序现在将依赖我的中间件和自定义 thunk 类型这一事实并不满意。我认为必须有一个更通用的方法。

有什么想法/建议吗？您将如何解决此类问题？

我正在构建一个 React/Redux 应用程序，查询 API 以获取有关用户的数据。

我试图在这里重用本教程： https ://rackt.org/redux/docs/advanced/ExampleRedditAPI.html

假设我有一个容器组件 UserPage ，它显示给定用户的信息：

为了获取当前用户，我进行了 API 调用： GET /api/users/:userId

我的问题是初始化组件时，属性用户不一定存在。

因此，弹出错误can't call property name on undefined。

你如何处理你的初始组件状态？你依赖componentWillReceiveProps刷新你的 UI 吗？你在使用isFetching属性吗？

谢谢！

我目前正在使用redux和redux-thunk中间件。

当涉及到关于动作调度的控制时，例如：

• 用户是否有足够的权限执行此操作？
• 提示用户确认他的动作（破坏性动作）

我相信将此类控件放在异步操作（thunk）中是可行的方法，因为：

• 它使我的代码保持干燥（许多组件/视图可以触发动作，而所述动作只有一个 actionCreator）
• 这是应用程序中“发生某事”之前的最后一点。让它感觉像是进行此类控制的战略场所。

问题

1. 我正在寻找其他 redux 用户的反馈。我对这个决定相当有信心，但是几乎没有反馈（并且是初级开发人员）让我怀疑。这是 使用 redux 时进行授权控制的正确方法吗？

2. 将授权控制器制作成 中间件怎么样？它将身份验证控件保存在一个地方，而不是在每个 actionCreator 中复制它。
   编辑 当深入研究这种可能性时，它很快变得具有挑战性，因为中间件最初只收到(dispatch, getState)授权中间件需要“知道”正在调度哪个操作（或正在使用哪个 actionCreator）的意思，这需要一个 hacky-ish 设置和最终证明不可靠。

其他要点

• 是的，这是客户端。是的，我们还进行服务器端检查。
• 我知道这些类型的控件不应该出现在我的商店/减速器中。他们需要纯洁。

我正在从其他组件调度一个动作，并且 store 正在使用svgArr属性进行更新，但是尽管以下 Stateless 组件connect'ed到了 store ，但当 store 更改为svgArr.

它是作为无状态组件的行为方式吗？还是我做错了什么？

我正在尝试构建一个简单的应用程序来查看从 nasa 的每日图片服务​​ ( https://api.nasa.gov/api.html#apod ) 发布的照片​​。当前正在监视按键，然后根据按键是向左、向上、向右或向下的箭头来更改日期（以及异步图片）。这些将相应地更改由一周或一天表示的日期（想象一次在日历上移动一个正方形）。

我遇到的问题是：我创建了一个异步操作创建器来获取下一个潜在日期 - 但是我需要知道应用程序的当前状态和按键来检索新日期。有没有办法将它封装到动作创建者中？或者我应该将应用程序状态放在应用程序中调用导出的动作创建者的位置，这样我就可以让我的动作创建者不知道应用程序的状态？我试图通过在componentDidMount顶层绑定 keydown 函数来做到这一点Component，但是绑定到应用程序商店似乎并没有反映减速器中发生的变化。

依赖 redux-thunk 中间件和 q 的异步逻辑：

这是与 gridAppState 的顶级绑定，以及在顶级发生的其他可能相关但我不太了解的内容。

我已经验证正确修改的日期对象正在到达减速器 - 但是 gridAppState 似乎停留在我加载的初始日期。

在依赖于附加事件处理程序和当前应用程序状态的 redux 中处理异步逻辑的正确方法是什么？有没有正确的方法来做这三个？

我读到 Redux Thunk 是管理异步操作/请求的可靠方法。通过其他操作来调度操作没什么大不了的。

调度同步动作怎么样？我不确定 thunk 方法的性能问题，但我可以在其他动作创建者内部调度动作而不在内部定义函数吗？

在我看来，对于这种需要，使用 redux thunk 是不必要的。

我有一个 React 应用程序，我需要使用 Redux 对在线服务（异步）进行 ajax 调用（以便学习）。

这是我的商店：

这是动作：

这是减速器：

我不明白我做错了什么。该操作正在从组件中完美调用。但后来我得到这个错误：

错误：操作必须是普通对象。使用自定义中间件进行异步操作。

我想我使用了错误的 react-thunk 中间件。我究竟做错了什么？

编辑

现在动作正在调用reducer，但是reducer在改变状态后没有重新运行render方法

我正在使用 redux-thunk 并开始看到一些限制。

假设我有 action PUSHER_CONNECT, PUSHER_CONNECTED, PUSHER_DISCONNECTED, PUSHER_LISTEN_TO_CHANNEL,PUSHER_MESSAGE_RECEIVED等。状态会有一些简单的东西来指示连接状态。

我怎样才能真正在这 2: 之间来回穿梭PUSHER_CONNECTED，PUSHER_DISCONNECTED因为推送连接仍然存在于某个地方。我正在考虑将 pusher 对象和相关对象保持在状态，如果是PUSHER_DISCONNECTED，请将它们设置为null. 但不能保证这些对象是不可变的。

另一个想法是，我会添加一个检查PUSHER_MESSAGE_RECEIVED: if state.connection !== 'connected'then don't push the new message... 模拟这是一个“真正的”断开连接。同样，添加一个检查PUSHER_CONNECT，如果 pusher 对象存在并且已连接，则不要重新连接，只需将状态更改为{connection: 'connecting'}

你会如何处理这个问题？

tl;dr：我需要一个异步 redux-thunk 操作的示例来展示如何进行异步调用（例如fetch），并触发状态更新。我还需要看看有人如何将多个此类操作链接在一起，例如：（1）查看用户是否存在于云中，然后（2）如果不存在，则注册它们，然后（3）使用新的用户记录来获取更多数据。

我发现的所有示例都假设 redux 存储可以直接导入到定义操作的模块中。我的理解是这是一个不好的做法：调用组件负责提供对存储的访问，via this.props.dispatch（来自通过 注入的存储<Provider>）。

相反，redux 世界中的每个动作都应该返回一个函数，该函数将接收适当的dispatch; 该功能应该完成工作，并返回......一些东西。Obv，重要的是什么。

这是我根据文档尝试过的模式，但事实证明这是失败的。文档中的任何内容都没有明确说明为什么这不起作用，但事实并非如此——因为此操作不会返回承诺。

我有一个响应ADD_USERS事件的减速器；它将一个或多个用户的传入数组与内存中的用户数组合并。减速器很容易编写。这就是我切换到 redux 的原因：一个商店，纯函数。但这种笨拙的生意绝对是一场噩梦。

我收到的错误.then是未定义的Actions.registerUser- 即Actions.registerUser不返回承诺。

我认为问题显然是我要返回一个函数——reduxAction函数——但这似乎没有商量余地。在商店拍摄数据的唯一方法是使用dispatch提供的方法，这意味着我无法返回承诺。

将 更改onUserRegistered为简单地调用调度然后返回所需的值也不起作用，也不让它返回一个实际的承诺。

请停止。我真的不明白。我不敢相信人们能忍受这一切。

编辑：为了提供一些上下文，这是我认为我应该能够执行的那种动作组合，而这些 thunk 动作令人沮丧：

我希望这样做，Actions.storeUserId并且Actions.fetchUsers除了返回以我选择的值解决的承诺之外，还会将数据发送到商店作为副作用。我认为调度正在发生，但是链条中断了，因为这些动作都没有返回承诺——它们返回普通函数。

这不仅看起来比 Flux 差很多，而且似乎难以理解。我无法相信所有这些疯狂只是为了将应用程序状态整合到一个单一的减少商店中。

是的——我已经尝试了新版本的flux，它带有ReducerStore，但是它对与react-native不兼容的CSS库有一些不适当的依赖。项目维护者表示他们不打算解决这个问题。我猜他们的状态容器依赖于 CSS 功能。

编辑：我的商店

编辑：这是调用代码。这是根级别的 react-native 组件。

我的假设是Store.dispatch期望一个函数，并为它提供对商店调度方法的引用。

我想使用 redux-thunk 客户端（在浏览器中），但我发现的唯一实现是 NPM 模块。如何在浏览器中加载 NPM 模块？正确的方法是什么？Webpack 要捆绑？

我最终使用了 Webpack。