问题标签 [redux-thunk]

我正在创建我的第一个 React-Redux 应用程序。我正在使用yo generator-redux并关注这个repo和官方文档。我已经渲染了 de SignIn Presentational Component，它工作正常，如果输入为空白，则显示错误。问题在于调度。我使用 Thunk 中间件，但 repo 没有。

我曾经console.log()探索过我的代码的工作深度，我发现正在调用组件操作，AJAX 请求（使用 axios）工作正常，但.then()（我认为）不起作用但不会引发错误。

这是我的代码：

行动

actions/UsersActions.js

零件

components/SignInForm.js

容器

containers/SignInFormContainer.js

展示/页面/视图

presentational/SignIn.js

减速机

reducres/UserReducer.js

reducers/index.js

店铺

index.js

我希望你能帮帮我！我不知道是否有问题，因为我使用的是 Thunk 而示例没有，或者是否缺少某些内容。

感谢你们！

我static fetchData在我的 Route 组件上使用一种方法...

...并在服务器端初始渲染之前收集所有承诺...

它工作正常，服务器会等到我的所有承诺都解决后再渲染应用程序。

现在，在我的客户端脚本上，我正在做与服务器上类似的事情......

它工作正常。但是，正如您可能推断的那样，在初始页面呈现时，静态fetchData被调用了两次（一次在服务器上，一次在客户端上），我不希望这样。

关于如何解决这个问题有什么建议吗？建议？

使用 React、Redux 和 Thunk 的组合，我有以下内容：

动作.js

减速器.js

上面的两个片段坐得很好，我觉得它们符合 Redux 的意图。我现在想在响应中返回的字段到达容器之前对其进行一些修改。

例如，响应可能是：

我想将其更改为（为简单起见的简单示例）：

迄今为止的研究

选项一 查看 Redux 上的异​​步示例，我可以看到这里的响应很轻松： https ://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

选项二 查看其他 Stackoverflow 问题，它让我相信将其排除在操作之外更有意义，因为 reducer 应该是修改状态的东西（但也许这并不能真正算作状态？）： Redux - 在哪里准备数据

选项三 我倾向于认为这是中间件的工作——这就是 normalizr 处理它的方式，但我找不到任何非被动中间件示例。如果中间件是这里的选择，中间件应该调度某种 SET_STATE 动作，还是可以自由地在中间件中更新状态？

编辑

试验了一些中间件，比如：

它似乎工作正常 - 这确实是中间件的意图吗？原始问题成立 - 理想地点在哪里？

我有一个显示帖子列表的 Redux 应用程序。状态或多或少是这样的：

每当我加载一些帖子时，我都会将它们添加到posts，然后我会替换visible_post_ids.

这是我加载帖子的动作创建者：

我的问题是：从一个 thunk 发送两个（或更多）事件是否符合习惯？或者我应该只派出一个并在各种减速器中处理它？

给定一个像这个问题中的用例：

使用拆分减速器更新相关状态字段的最佳方法？

处理依赖于自身状态之外状态的减速器中的动作的最佳实践是什么？上述问题的作者最终只是将整个状态树作为第三个参数传递给每个 reducer。这似乎是严厉和冒险的。Redux FAQ 列出了以下潜在的解决方案：

• 如果 reducer 需要知道来自另一个状态切片的数据，则可能需要重新组织状态树形状，以便单个 reducer 处理更多数据。
• 您可能需要编写一些自定义函数来处理其中一些操作。这可能需要用您自己的顶级 reducer 函数替换 combineReducers。
• 您还可以使用 reduce-reducers 等实用程序来运行 combineReducers 来处理大多数操作，但也可以为跨状态切片的特定操作运行更专业的 reducer。
• 诸如 redux-thunk 之类的异步操作创建者可以通过 getState() 访问整个状态。动作创建者可以从状态中检索额外的数据并将其放入动作中，以便每个减速器都有足够的信息来更新自己的状态切片。

在我的用例中，我有一个“继续”操作，它确定允许用户在多表单/多步骤过程中访问哪个页面，因为这几乎取决于整个应用程序状态，所以我不能在我的任何儿童减速机中处理它。目前，我已将商店拉入动作创建器。我使用商店的当前状态来计算触发到我的“页面”reducer 的操作对象，这会更改活动页面。我可能会在这个动作创建器中安装 redux-thunk 并使用 getState()，但我还没有致力于这种方法。

我想这不是一个太糟糕的解决方案，因为只有一个动作（到目前为止）必须以这种方式处理。我只是想知道是否有更好的解决方案，或者是否有办法重新构建我的状态和减速器以使其更容易，或者我正在做的事情是否符合 Redux 的最佳实践。如果有任何类似的例子，那也会有帮助。

为了提供更多上下文，我的状态树目前如下所示：

活动页面是用户必须在其中输入数据才能进入下一页的页面/部分）。确定活动页面几乎总是取决于项目状态，有时取决于订单状态。最终结果是一个应用程序，用户连续填写一些表格，一旦表格有效，点击继续。在继续时，应用程序确定所需的下一页并显示它，依此类推。

编辑：我们尝试了结合子减速器实现“全局”减速器的方法。

实现是这样的......

全局减速器首先在整个应用程序状态上运行，然后将其结果提供给子减速器。我喜欢这样一个事实，即我不再将一堆逻辑放在动作创建者中，只是为了读取状态的不同部分。

我相信这与 redux 的原则是一致的，因为每个动作仍然会命中每个 reducer，并且调用 reducer 的顺序总是相同的。对这个实现有什么想法吗？

编辑：我们现在使用路由器库来处理页面状态，所以 activePage 和 pagesById 已经消失了。

我在我的应用程序中使用 reactjs、react-router 和 redux。我正在使用异步操作，以下是我的 action.js 代码

以下是我的 store.js 代码

以下是我的 reducer.js 代码

现在，每当我发送一个操作时，我的浏览器控制台上都会显示一个错误，说明

警告：[react-router] 你不能改变'Router routes'；它将被忽略

我尝试用'react-router-redux'解决这个问题，但它没有解决。

我有一个简单的组件，它在用户加载页面时调用一个动作，并且在该动作中，我试图调度另一个动作来将loggedIn商店的状态设置为 true 或 false：

我可以在guestLoginRequest调用操作时获取登录信息，但是当我尝试在其中调度另一个操作时，什么也没有发生：

Uncaught ReferenceError: dispatch is not defined删除return dispatch => { }语句时出现错误。在我的商店中，我使用的是 redux-thunk，所以我可以在动作内部调度：

我也在我的 app.js 中将调度映射到道具：

以防万一，这是我的 client.js 和 reducer 文件：

任何想法为什么我的调度功能不起作用？我很困惑，因为我确实在我的商店中设置了 redux-thunk，并且我在调用return dispatch => { }. 有什么我想念的吗？提前感谢您的任何建议！

将配置注入动作创建者的“Redux”方式被认为是什么？

考虑一个异步动作创建者：

正如您所看到的 - AuthService（和所有其他服务）需要一些配置，通常定义诸如:baseUrl等headers内容。

通过以下方式将它们required 放在AuthService自身中：

由于多种原因是次优的，并且不允许您为特定的服务实例覆盖它们。

使用中间件（一些扩展redux-thunk）将提供注入配置的能力，但是：

1. 它很可能已经通过 注入getState，因为对我来说，配置是应用程序状态的一部分，特别是如果它是可编辑的

2. 它仍然不允许基于每个创建者的覆盖

将配置从容器组件直接传递给动作创建者this.props.dispatch(login(username, password, config));对我来说非常冗长。

我目前正在尝试概念化如何根据在另一个组件中调度后的数据更改来处理在组件中调度一个动作。

采取这种情况：

dispatch(someAjax)-> 状态更新中的属性。

在此之后，我需要依赖于这个相同属性的另一个组件来知道它已经更新并根据新值调度一个动作。

而不是使用某种类型的value.on(change...解决方案，处理这种“级联”动作的首选方法是什么？

据我所知，如果我错了，请纠正我，redux-thunk是一个中间件，它可以帮助我们在操作本身中调度异步函数和调试值，而当我使用redux-promise时，我无法在不实现自己的情况下创建异步函数作为 Action 的机制会引发仅调度普通对象的异常。

这两个包之间的主要区别是什么？在单个页面反应应用程序中使用这两个包或坚持使用 redux-thunk 有什么好处吗？