问题标签 [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.
reactjs - redux 对异步数据和交互的反应策略
我想知道什么设计最适合这个。我有一个远程获取的列表。假设这是一个帖子列表。
在此列表中,用户可以选择每个帖子进行操作(甚至批量操作)。假设在 UI 中每个小帖子都会有一个复选框。
因此,后端并不关心这些选择操作,但我需要确切知道选择了哪些帖子(例如删除),以便前端可以向后端发送请求。处理该问题的一种方法是使状态的形状如下所示:
但这可能会使 UI 中的渲染变得复杂。
那么另一种选择是在选择帖子时直接修改每个帖子的数据。像这样:
但这似乎与如何使用 react 和 redux 背道而驰。任何反馈表示赞赏!
javascript - 如何使用 Redux 获取新数据以响应 React Router 更改?
我正在使用 Redux、redux-router 和 reactjs。
我正在尝试制作一个应用程序,我可以在其中获取有关路线更改的信息,所以,我有类似的东西:
当有人进入时,artist/<artistId>
我想搜索艺术家然后呈现信息。问题是,这样做的最佳方法是什么?
我找到了一些关于它的答案,使用 RxJS 或尝试使用中间件来管理请求。现在,我的问题是,这真的有必要还是只是保持架构与反应无关的一种方式?我可以从 react componentDidMount() 和 componentDidUpdate() 中获取我需要的信息吗?现在,我通过在请求信息的那些函数中触发一个动作来做到这一点,并且当信息到达时组件重新呈现。该组件有一些属性可以让我知道:
谢谢!
reactjs - 登录后反应路由器重定向
我正在使用带有 react-redux 的反应路由器。从操作成功登录后,我需要转发到“/”(根路径)。我怎样才能在行动中做到这一点?
javascript - 使用 React 和 redux 从不同的 reducer 调用操作
我有 2 个组件;一个市场,一个地位。状态组件管理用户拥有的金额,市场上有购买一些东西的按钮。当我点击按钮(在市场组件中)时,我希望我的钱减少。
我怎样才能以最好的方式实现这一目标?
这是我的具有市场和状态的应用程序组件:
我从市场组件的状态中绑定了操作(我觉得这不是正确的做法,但它确实有效)。
在此之后,我通过单击这样的按钮在 Market 组件中处理这些操作:
有没有更好的办法?
谢谢
reactjs - 未捕获的 TypeError:store.getState 不是函数
在我的 redux js 应用程序(google appengine 后端)中,当打开包含 Root 组件的页面时,我收到以下警告和错误消息。
警告:失败的 propType:提供给store
的类型无效的道具,预期的。检查. bundle.js:6169function
Provider
object
Root
警告:失败的 propType:提供给store
的类型无效的道具,预期的。检查. bundle.js:6169function
DevToolsWrapper
object
Root
警告:上下文类型失败:提供给store
的类型的子上下文无效,应为。检查. bundle.js:6169function
Provider
object
Root
警告:上下文类型失败:提供给store
的类型的上下文无效,预期为。检查.function
Connect(AsyncApp)
object
Provider
这是 react-redux 的 lib/components/createConnect.js 中发生错误的地方。
在断点处,就在此错误发生之前,console.log(store) 将返回此内容。
但是,当我使用 Node 后端运行完全相同的代码时,console.log(store) 会改为返回此对象。
我的根组件和 configureStore.js 如下所示:
configureStore.js
javascript - 在 React 中导航离开组件时中止请求
我正在使用react
,redux
和react-router
. 我的页面之一是发出 API 请求并显示数据。它工作正常。我想知道的是,如果 API 请求尚未完成,并且用户导航到另一条路线,我希望能够中止请求。
我假设我应该在componentWillUnmount
. 只是无法理解它将如何工作。就像是...
我会将xhr
引用存储在操作中的某处。不确定这是否是正确的方法(我认为不是),有人可以指出我正确的方向吗?
javascript - 如何在 Redux 中处理复杂的副作用?
我一直在努力寻找解决这个问题的方法......
我正在开发一个带有在线记分牌的游戏。玩家可以随时登录和注销。完成一场比赛后,玩家会看到计分板,看到自己的排名,分数会自动提交。
记分牌显示玩家的排名和排行榜。
当用户完成游戏(提交分数)和用户只想查看他们的排名时,都会使用记分牌。
这是逻辑变得非常复杂的地方:
如果用户已登录,则将首先提交分数。保存新记录后,将加载记分牌。
否则,计分板将立即加载。玩家将可以选择登录或注册。之后会提交分数,然后再次刷新记分牌。
但是,如果没有要提交的分数(只是查看高分表)。在这种情况下,只需下载播放器的现有记录。但是由于这个动作不会影响记分牌,所以记分牌和球员的记录应该同时下载。
有无限数量的级别。每个级别都有不同的记分牌。当用户查看记分牌时,用户正在“观察”该记分牌。当它关闭时,用户停止观察它。
用户可以随时登录和注销。如果用户退出,用户的排名应该消失,如果用户作为另一个帐户登录,那么应该获取并显示该帐户的排名信息。
...但是仅对用户当前正在观察的记分牌进行此信息获取。
对于查看操作,结果应该缓存在内存中,这样如果用户重新订阅同一个计分板,就不会提取。但是,如果提交了分数,则不应使用缓存。
这些网络操作中的任何一个都可能失败,玩家必须能够重试它们。
这些操作应该是原子的。所有状态都应该一次性更新(没有中间状态)。
目前,我可以使用 Bacon.js(一个函数式反应式编程库)来解决这个问题,因为它带有原子更新支持。代码非常简洁,但现在它是一个混乱的不可预知的意大利面条代码。
我开始关注 Redux。所以我尝试构建商店,并想出了这样的东西(在 YAMLish 语法中):
问题变成了:我把副作用放在哪里。
对于无副作用的操作,这变得非常容易。例如,在LOGOUT
操作时,record
reducer 可以简单地删除所有记录。
但是,某些操作确实有副作用。例如,如果我在提交分数之前没有登录,那么我登录成功,该SET_USER
操作将用户保存到商店中。
但是因为我有一个分数要提交,所以这个SET_USER
动作也必须导致一个 AJAX 请求被触发,同时,record.levelN.status
将loading
.
问题是:当我以原子方式登录时,如何表示副作用(分数提交)应该发生?
在 Elm 架构中,更新程序在使用 的形式时也会产生副作用Action -> Model -> (Model, Effects Action)
,但在 Redux 中,它只是(State, Action) -> State
.
从Async Actions文档中,他们推荐的方式是将它们放入动作创建器中。这是否意味着提交分数的逻辑也必须放在操作创建器中才能成功登录操作?
我觉得这有点奇怪,因为负责这种连锁反应的代码现在存在于两个地方:
- 在减速机中。
SET_USER
调度操作时,reducerrecord
还必须将属于观察到的记分板的记录的状态设置为loading
。 - 在动作创建者中,它执行获取/提交分数的实际副作用。
似乎我还必须手动跟踪所有活跃的观察者。而在 Bacon.js 版本中,我做了这样的事情:
实际的培根代码要长得多,因为上面所有复杂的规则,使得培根版本几乎不可读。
但是培根会自动跟踪所有活跃的订阅。这让我开始质疑它可能不值得切换,因为将它重写到 Redux 需要大量的手动处理。任何人都可以提出一些建议吗?
reactjs - dispatch(action) 不会立即更新单元测试中的 redux 状态
我正在基于 react 和 redux 为我的应用程序编写测试用例。
用 渲染后initialState
,我派发一个动作并查看状态是否发生变化。
然后我打印状态
我希望状态是{"key": "some_val"}
. 但是,它仍然显示{"key": "old_val"}
。
该应用程序工作正常,只是不是测试,所以我的action-creators
or不会有任何问题reducers
。
我在这里做错了吗?顺便说一句,我正在使用thunk
中间件进行异步操作分派。这会干扰这里吗?如果是,我如何等到异步操作完成?
更新:
此处显示的 redux 测试非常简单,但它们似乎工作正常。
reactjs-flux - 为什么我不应该改变一切?
几个月前,我遇到了一个 Flux,我发现它很棒,我喜欢它,我使用它.. 几乎在每个新项目中,当我遇到 redux 时,我更加喜欢它,但是几天前 Pete Hunt 发布了一条推文,其中他判断人们对一切都使用助焊剂。而且我认为它有一个完美的意义,但另一方面我不明白......他发布了另一条推文解释通量的案例,我还阅读了一篇关于通量用例的文章。长话短说 - “如果您的应用没有复杂的数据更改和缓存,请不要使用它。但如果有,我强烈建议您尝试使用 Flux。” 为什么我应该使用通量对我来说完全有道理,但我不清楚如果我没有复杂的数据更改,为什么我不应该这样做。
在文章丹点中,当您在实际项目中遇到这些问题(助焊剂解决)时,您可以更容易理解助焊剂的好处,但正是这个(因为我在工作项目中遇到了这些问题)现在我尝试在每个项目中使用通量,因为我不想再处理它了。
疯狂的部分,现在我也经常将它用于 ui 状态,而不仅仅是数据更改。假设我可以拥有一个小部件组件,例如时钟。它可以进行一些 ui 更改,例如显示/隐藏秒数,在数字/模拟之间切换,并且它具有白天类型状态(白天/夜晚),并且可以在事件发生更改时调度事件,但其他组件会监听它并可以做出反应,例如更改背景颜色。我可以通过本地组件状态和容器(智能组件)状态轻松解决它,但就像我可以将所有这些逻辑放入存储(减速器)中一样,组件将真正被转储并仅对当前状态(道具)和容器做出反应(智能)只听组件之间的存储和分区状态。如果它看起来还不错,指出我可以将它用于每个 ui 状态 - 打开/关闭侧边栏,一些特定的组件更改等。
我能做到的原因:
- 它看起来对我来说是可以预测的。我完全知道我的应用程序中发生的任何更改都在一个地方提供。
- 很容易调试。我可以只记录所有操作,如果我遇到一些错误,我可以很容易地找到发生的事情并重现它。
- 我可以轻松地扩展我的应用程序而不必担心,我应该将某些东西移动到通量状态,因为我已经做到了。
但我也同意它看起来不堪重负,我可以不用助焊剂来解决它,但我不能回答我,为什么我不应该在这些情况下使用助焊剂。它有什么问题?请帮我。