问题标签 [redux-thunk]

我有一个组件可以构建可以选择的搜索/排序过滤器。我希望在 redux 中跟踪这些过滤器的选定状态，以便搜索构建器可以订阅并查看它们何时适当地更改和更新。我试图弄清楚如何做的事情（以一种不觉得奇怪的方式）是将过滤器对象填充到状态中。例如，现在在<Search />组件中我有类似的东西：

那么如何在不触发多个元素渲染的情况下让这些道具进入使用状态。我也在服务器上渲染应用程序，所以对于初始附件渲染，状态已经有了选项。

在 OptionPicker 组件中，我有：

这有点工作，但是有一段时间在填充 redux 状态之前调用渲染，这会引发错误。我可以提防这种情况，但这些都不是“正确的”。那个道具不应该一直在那里吗？有没有我错过的模式？

我有一个我正在工作的项目，它是一个 HTML 页面构建器。用户可以从菜单中从预先设计的 HTML 页面部分（页眉、滑块、内容块、页脚等）列表中进行选择，然后将它们拖放到画布上以构建网页。最终结果是一个包含静态网站的可下载 zip 文件。

到目前为止，我的应用程序布局如下所示：

我已经涵盖了第 1,2 和 3 部分。第 4 部分，一个滑出式抽屉，包含 HTML 部分，单击时我想将相应的组件附加到页面的主要区域，此过程将重复进行，直到网页构建完成。然后可以编辑每个组件并最终将其保存为页面。

我正在寻找的建议是如何使用 React/Redux 将完整组件附加到主要区域 onclick？

我假设我调度引用组件的动作/reducer，但我如何实际添加和跟踪附加到主区域的组件？使用 jQuery 这将是一个简单的 jQuery .load()，但在 React/Redux 中我不知道，也许我可以使用 React Router 使用一个技巧？

谁能帮我指出正确的方向？延伸阅读等

提前谢谢了。

我有带有 React Router 的 Redux 应用程序（基于https://github.com/este/este）。

在一个 Route 内，可能有超过 1 个 AJAX 调用（由redux-promise-middleware&触发redux-thunk）。当页面更改（通过react-router）时，我希望拒绝所有剩余的_SUCESS或由前一个路由触发的_FAILED回调 。actions

做这个的最好方式是什么？

如何将函数保存为 redux 商店中的状态？

例子：

我将一个函数作为参数传递给 redux-thunk 调度程序函数，我想将此过滤器函数保存在我的 redux 存储中：

在 ReduxDevTools 我可以看到，“过滤器”没有被调度并保存在存储中。有没有办法做到这一点？

谢谢

更新：我缩短的减速器：

我想使用 redux 对以下异步逻辑进行建模：

1. 用户操作会触发一系列异步 API 调用。
2. 任何 API 调用都可能返回 401 状态（登录超时）
3. 如果 API 响应 401，则显示重新登录弹出窗口
4. 重新登录成功后，重新发出 API 调用并继续

我不知道把这个逻辑放在哪里。Actions不知道其他actions，它们只有dispatch的权限，所以不能停下来等待它们完成。Reducers 无法访问 dispatch，所以我不能把它放在那里……那么它在哪里？自定义中间件？商店听听？在智能组件中？

我目前正在使用 redux-promise-middleware 和 redux-thunk。如何最好地组织这种类型的流程——而不需要购买像 redux-saga 或 redux-rx 之类的东西？

也不确定透明中断 API 调用以执行其他操作的最佳方法，即 API 调用在可选登录过程完成之前不应触发其完成或失败的操作。

I can't see a clear way to know when a particular action has fired or particular state has updated from the context of a redux-thunk action creator.

I want to do something like this:

1. Dispatch an action
2. Detect a possible recoverable error condition
3. Error condition dispatches a different action signalling recovery process initiating
4. Wait for recovery to complete
5. Proceed with current action or re-dispatch it

Concrete example:

1. User interaction triggers API call action
2. Note that API call failed, needs login
3. Dispatch 'LOGIN_REQUIRED' action, which pops up a <dialog> for user.
4. Wait for logged in state to change (or LOGIN_SUCCESS action to occur, whatever).
5. Make same API call again

I'm trying to figure out how and where to load the data (ie call dispatch on my action) for my select box in react + redux + thunk. I'm not sure if it should go in the constructor of my App container, or should i load it inside my component (in my example: "MyDropdown")

My main App:

My Component

I've tried componentDidMount() inside my App class, but it didnt seem to work. It seems to make sense to put the initialize data and call to actions there as it'll be all centralized, instead of calling actions inside my child components. Also, i'll have multiple select boxes that need to be loaded on startup, so my App class might grow quite a bit, is that the correct way to do it? I'm not sure what the best practice is as i've only just started learning react.

在过去的几天里，我一直在搜索无数个小时，试图自己解决它，但无济于事......我有一个非常简单的 thunk，但从未调用过实际的调度......

这是动作创建者：

我能看到的第一个日志，从来没有第二个。我的商店设置正确（我认为）

我正在使用 redux-thunk 中间件构建一个 React/Redux 应用程序来创建和处理 Ajax 请求。我有一个经常触发的特殊 thunk，我想在触发新请求之前取消任何以前启动的 Ajax 请求。这可能吗？

在编写redux-thunk函数时，称为thunk，有很多样板文件可以很容易地抽象掉。例如，在我们的大多数异步 API 调用中，我们都在执行以下操作，而没有任何副作用：

简单的！尽管这涵盖了我们至少 70% 的请求，但我确信有一种优雅的方法可以将上述代码的分配抽象为类似这样的内容（伪代码）：

当我们需要检查状态和其他副作用时，我们可以返回到适当的 thunk。虽然在大多数情况下......我们可以减少这个？

有什么优雅的想法吗？