问题标签 [redux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
24064 浏览

reactjs - 触发 Redux 操作以响应 React Router 中的路由转换

我在我最新的应用程序中使用 react-router 和 redux,我面临一些与基于当前 url 参数和查询所需的状态更改有关的问题。

基本上我有一个组件需要在每次 url 更改时更新它的状态。状态是通过 redux 与装饰器的道具传递的,就像这样

目前我正在使用 componentWillReceiveProps 生命周期方法来响应来自 react-router 的 url 更改,因为当 this.props.params 和 this.props.query 中的 url 更改时,react-router 会将新的道具传递给处理程序 -这种方法的主要问题是我在这个方法中触发一个动作来更新状态——然后它会传递新的道具组件,这将再次触发相同的生命周期方法——所以基本上创建了一个无限循环,目前我正在设置一个状态变量来阻止这种情况发生。

是否有基于路由转换触发操作的标准方法,或者我可以将商店的状态直接连接到组件的状态,而不是通过道具传递它?我曾尝试使用 willTransitionTo 静态方法,但我无权访问那里的 this.props.dispatch。

0 投票
1 回答
1307 浏览

javascript - es6 hash array index function call mixed syntax

What kind of ES6 syntax is this?

#xA;

Taken from : https://github.com/quangbuule/redux-example/blob/master/src/js/reducers/Repo.js

0 投票
1 回答
158 浏览

javascript - 部分服务器端渲染

我们知道服务器端渲染有利于 SEO,尤其是对于一些博客应用。但是与客户端渲染应用程序相比,它会失去一些好的用户体验功能并且不容易调试。

我想知道是否有办法将服务器端渲染技术部分应用于 Web 应用程序的部分(如应用程序的博客部分),但对其余部分使用客户端渲染。有点将服务器端和客户端渲染混合在一起。不确定这是同构应用程序的含义。

0 投票
2 回答
7818 浏览

javascript - 如何在 redux 中使用 setTimeout 和调度程序触发定期操作

我如何/在哪里可以定期调度动作?使用递归setTimeout进行倒计时。

取自示例,类似于以下内容:

那么这是一个好主意,还是有更好的方法来解决这个问题,比如使用中间件或从其他地方创建操作?

我更喜欢这个的通用版本,我可以通过商店控制计时器的启动/停止。

我已经设置了一个示例实现,请查看https://gist.github.com/eguneys/7023a114558b92fdd25e

0 投票
4 回答
2656 浏览

reactjs - 如何在 Immutablejs 和 Redux 以及 Flux 和 React 中设置类似 Ember 的计算属性

我习惯于在Ember Object Model中计算属性。这是一种指定依赖于其他属性的计算属性的便捷方式。

fullName取决于firstNameand lastName,我可以将计算属性设置为函数computeProperties并在computeProperties每次进行更改时调用。

例子:

有没有办法自动设置计算属性,这样我就不必每次都调用额外的函数。在 Redux 或 ImmutableJS 中。

0 投票
1 回答
1562 浏览

reactjs - 如何处理 Flux 商店中的一对多关系

我刚刚开始使用flux(现在使用redux)并且想知道应该如何处理关系。
例如,我们可以使用具有带有包含卡片的列的板的 Trello。

一种方法是为 board 设置一个 store/reducer,并在其中保存所有数据,但这意味着一些非常大的存储,因为它们还必须包含列和卡片的所有操作。

我见过的另一种方法是将嵌套资源分为例如 BoardStore、ColumnStore 和 CardStore,并使用它们的 id 作为参考。

这是一个我有点困惑的例子:您可以有一个名为 addCard 的操作创建者,它向服务器发出请求以创建包含所有数据的卡片。如果您正在进行乐观更新,那么您之前会在您的一个商店中创建一个卡片对象,但在您收到请求之前您无法知道它将拥有的 id。

简而言之:

  • 触发 addCard
  • addCard 执行请求,同时您返回 ADD_CARD_TEMP 类型的操作
  • 您收到请求并返回 ADD_CARD 类型的操作,其中 store/reducer 更改了 id。

有没有推荐的方法来处理这种情况?嵌套的 store/reducers 对我来说看起来有点傻,但否则你最终会得到非常复杂的 store,所以它看起来真的是一种妥协。

0 投票
1 回答
9496 浏览

reactjs - Immutable-JS:按键合并地图列表

我有一个应用状态对象,它看起来像这样:

当我从服务器获取(使用fetchAPI)时,我想设置为 false,并从响应中$isLoading合并currentPage和输入。totalPages到目前为止,这很容易使用merge. 我不太确定如何优雅地合并到results节点中。它们是Immutable.Maps,并且应该基于_id属性合并。有没有一种优雅的方法可以将它用于这段代码?

0 投票
2 回答
1067 浏览

react-router - 加载服务器数据的位置

我正在使用react-router并导航到在 URL 中获取 ID 的组件,并且必须使用此 ID 在操作的帮助下从服务器获取数据。

目前我正在调用componentWillMount钩子中的动作创建者。

到目前为止,这有效,但带来了一个问题。在渲染方法中,我必须检查myData它的所有属性是否真的存在,然后才能真正渲染。

是否有另一种方法可以在无需手动检查的情况下在渲染之前将数据放入存储中?

0 投票
2 回答
2124 浏览

javascript - 如何协调 Flux 和 React 之间的服务器错误消息?

在过去的几个月里,我一直在学习 React 和 Flux,我还没有处理过的一件事是向用户显示错误消息。具体来说,由于通量操作创建者方法中的 ajax http 请求而出现的错误消息。

一个简单的例子是用户登录 - 如果登录 ajax 请求由于密码错误而失败,服务器会以失败响应。在那一刻,在我的通量动作创建者方法中,我唯一的选择是调度一个包含错误信息的动作,对吗?

我可以发送错误信息并将该错误保存在商店中。不过,我不确定将某些错误与某些组件联系起来的最佳方法是什么。假设我的反应组件树正在呈现多个错误感知组件,但在服务器端用户身份验证尝试期间发生错误,需要在该登录表单上显示。

是否有良好的模式或约定来存储错误并知道它们用于哪个组件?是否有一种编程方式来确定这一点,而不是将某个标识符传递给每个动作创建者函数,以标识动作创建者被称为它的组件等?

0 投票
1 回答
4471 浏览

javascript - 用于乐观更新的操作存储是 Redux/Flux 中的好方法吗?

我一直在使用 React+Flux 应用程序中的乐观更新,并看到了两件事:

  1. 如果用户在存在一些未完成的操作时尝试关闭窗口会发生什么。例如,在 Facebook 中,即使没有真正持久化,消息也会显示在墙上(这就是乐观更新所做的,对用户来说响应速度更快的应用程序)。但是,如果用户在墙上发帖并立即关闭应用程序(在注销或关闭窗口时),发帖可能会失败并且他不会收到警报。
  2. 我不喜欢 Stores 管理自己的实体(例如消息)的想法以及为持久消息触发的操作的情况(加载、成功、失败?)。它混合了东西。

所以我致力于此并创建一个ActionStore来管理由组件触发的操作的状态。这是源代码,这是一个现场演示。

它或多或少像这样工作:

  1. 组件层次结构的根(redux 中的容器)获取新操作的 nextId 并将其像道具一样传递给他的孩子(这很难看)。
  2. 子组件触发一个动作:它保留 actionId 以便在之后向商店询问它并调用动作创建者。
  3. 动作创建者创建一个新动作并向中间件返回一个函数。
  4. 从 Action 返回的函数使用 API 调用创建一个新的 Promise 并调度一个 XX_START 类型的操作。
  5. ActionStore 监听 XX_START 动作并保存它。
  6. 子组件接收新状态并找到保存的 id 的操作并询问当前情况:加载、成功或失败。

我这样做主要是为了将“实体”的状态与动作的状态分开,但也允许使用相同的有效负载重新触发动作(如果服务器暂时关闭或如果我们收到 500 响应状态,这可能很有用用户松动信号)。

此外,拥有动作存储可以在用户注销或关闭窗口之前轻松询问它们是否是待处理的动作。

注意:我正在使用针对 Rest API 的单个应用程序页面 Web 应用程序,我不认为在服务器端渲染中使用它

创建一个 ActionStore 是一个可行的选择,还是我打破了一些 Redux/Flux 基础?这可能会结束使用 React 热重载和时间旅行的可能性吗?

你应该毫不留情地回答,我可能做过很多丑陋的事情,但我正在学习 React/Redux。