问题标签 [recoiljs]

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 投票
5 回答
5409 浏览

reactjs - 如何将反冲库与 react-native 集成?

我正在尝试来自 facebook reoil 的新状态管理库我在 reactjs 项目上尝试了入门示例,它运行良好。之后我在一个 react-native 项目上尝试了反冲,但我得到了一个错误:

错误信息

这是我尝试过的代码:

应用程序.js

RecoilTest.js

原子.js

0 投票
2 回答
1778 浏览

javascript - 有没有办法在组件之外更新 recoilJS 的状态?

所以我正在为我正在构建的一个 js 游戏尝试使用 recoilJS,它非常简洁,但是从组件更新原子的需要只是感觉像是一个限制。

为了创建一个游戏循环,我将所有逻辑放在空组件上,以便能够读取和写入状态。即使我将在组件之外构建登录,我也需要始终移动不同的统计信息。有一种方法可以更新反应组件之外的原子(不是通过钩子)?

0 投票
1 回答
1118 浏览

reactjs - 如何使用 React Recoil selectorFamily 存储查询结果?

我正在向服务器发出请求以根据搜索字符串搜索学生。我从那里得到结果,selectorFamily但我也希望能够将这些结果存储在其中,studentsAtom这样我就不必再次提出请求,并且可以在其他地方使用该状态。

我该怎么做呢?

我的反冲代码:

我的组件中的代码:

0 投票
1 回答
2106 浏览

reactjs - Recoil JS - 摆脱重新渲染我的应用程序的悬念

我正在我目前正在构建的 React 框架中试验 Recoil。在我的用例中,应用程序将根据用户活动生成一个操作对象,然后将其发送到服务器,从中获取应用程序状态。

动作存储在反冲atom中。我正在使用一个selectorFamily接受动作并从服务器获取状态的反冲。以下是我实际在做的简单示例(代码在打字稿中):

这里,MyApp是一个反应组件,它将基于 appState 呈现应用程序的整个视图树。

现在,从一个组件的直接或间接子组件中,MyApp可能会触发另一个操作:

结果与setMyAction我初始化应用程序的初始状态相比,值略有偏差。因此,我想只重新渲染依赖于更改状态的组件。

但是,我的整个视图树都会更新。我怀疑的原因React.Suspense是用回退替换dom,直到返回操作的响应(注意这MyStateSelectorFamily是异步的,因为状态作为承诺返回)。

在一个更像 redux 的世界中,我会在 promise 解决后触发我的请求并发送状态更改(并且我打算以不同于React.Suspense为我做的方式处理加载状态)。

有没有办法阻止我的应用重新渲染?我已经看到使用反冲Loadables来避免的示例React.Suspense,但是当可加载处于状态时,我正在努力获取旧的应用程序loading状态。


更新

当我进一步试验时,我能够使用 dispatch 方法让它模仿 reducer 方法:

  1. 我摆脱了动作原子,并变成MyStateSelectorFamily了原子本身:

  2. 我用setMyAction(...);自定义钩子替换了更改状态的组件中的部分:

  3. 我在组件中使用了钩子:

好吧,这似乎可以按我的意愿工作,并且更接近我以前使用 redux 的代码库,所以我比selectorFamily以前的方法更喜欢这种方法。但是,我经常看到控制台中打印出反应警告:

我的应用程序是一个 SPA 应用程序,警告会在初始加载时打印。然后它可以正常工作,没有可观察到的问题。我想知道我是否可以解决警告的原因——这Batcher似乎是一个反冲的事情,我想我没有做正确的事情来打破它。

0 投票
1 回答
1127 浏览

reactjs - 使用 RecoilJS 通过 API 发布数据

RecoilJS文档中,有一个如何处理异步数据查询的示例,但它只是关于获取数据。

假设我有一个简单的状态:

还有一个是注册表单的组件:

发布的数据在FormData. 成功创建新帐户后,服务器将发送一个包含该帐户id的响应name

此响应数据将被设置为 的新状态accountState

我该如何处理这个过程RecoilJS

0 投票
2 回答
4981 浏览

reactjs - 在反应中使用recoil.js,在类组件中不使用钩子

我是新手,我正在使用所有类组件。这是我的后坐力状态

如何在类组件中使用反冲并设置令牌?我RecoilRoot在应用程序中使用过

login.js中,我想在recoil中设置token,但login.js它是一个类组件。

res.data.token我得到 jwt 令牌。

先感谢您!

0 投票
1 回答
591 浏览

recoiljs - 如何使用反冲实现典型用例

我有一个父组件 A 和子组件 B 和 C。我需要在 B 和 C 之间共享一个列表,比如一个待办事项列表。孩子 C 可以添加/删除待办事项列表中的项目。假设待办事项列表由异步服务支持。

我已经用 A、B 和 C 组合了一个应用程序。我的图表有选定的 todo(从回调设置)原子和它自己的原子中的当前 todos 列表。当前的待办事项列表依赖于一个 id。当 A 挂载时,我从 URL 设置一个“id”(想想路由)。由于我的视图使用待办事项列表的反冲值,因此他们会在可用时获取列表。

当我在选择了待办事项的情况下单击 C 中的删除按钮时,我会更新服务器上的列表。但是我希望在请求返回 Ok 后刷新待办事项列表,表明待办事项已被删除。或者,如果我添加一个待办事项,我想立即将待办事项添加到列表中以便立即查看,在服务器上添加待办事项然后在后台获取待办事项以刷新后坐待办事项列表。

我如何处理后坐力的最后两个部分?

0 投票
1 回答
3562 浏览

reactjs - 使用 Recoil 为数千个项目创建和读取状态

我刚刚开始在一个新项目中使用 Recoil,我不确定是否有更好的方法来实现这一点。

我的应用程序是一个基本上编辑包含对象数组的 JSON 文件的界面。它读入文件,根据特定属性将对象分组到选项卡中,然后用户可以导航选项卡,查看每个选项卡的几百个值,进行更改,然后保存更改。

我正在使用反冲,因为它允许我从应用程序中的任何位置访问每个输入的状态,这使得保存更容易 - 理论上......

为了为 JSON 文件中的每个对象生成状态,我创建了一个返回的组件,null我映射到初始数组,创建组件,该组件使用 AtomFamily 创建 Recoil 状态,然后还将 ID 保存到另一个部分Recoil 状态,所以我可以保留所有内容的列表。

问题 1这些是更好的方法吗?该null组件感觉不对,但是将整个数组存储在单个状态中会导致每次按键时重新渲染所有内容。

为了保存数据,我有一个调用函数的按钮。该函数只需要获取 ID,遍历它们,获取每个 ID 的状态,然后将它们推送到一个数组中。我也使用 Selector 完成了此操作,但问题是由于 Hooks 规则,我无法从函数调用 getRecoilValue - 但是如果我将值提供给父组件,它会再次减慢一切。

问题 2我很确定我错过了考虑存储状态和使用钩子的正确方法,但是我还没有找到这个特定用例的任何示例 - 需要预先生成状态,然后访问它再次保存。有什么指导吗?

0 投票
1 回答
1321 浏览

reactjs - 如何使用 RecoilJS 构建深度嵌套状态树?

如何使用 RecoilJS 构建深度嵌套状态树?我应该将每个分支都作为单独的原子还是什么?

0 投票
0 回答
281 浏览

reactjs - Recoil.js:在 React 实例之间共享状态?

我必须创建多个以模块化方式集成在现有 WordPress 网站上的小型 React 应用程序(使用简码)。

他们可能使用与当前共享的相同状态react-hooks-global-state,这很好用。

但是,由于我已经开始使用Recoil.js其他应用程序,我想知道是否可以或将可以与它共享全局状态(跨 React 实例)。现在的问题似乎是我们必须提供一个RecoilRoot必须嵌套在所有组件之上的。显然,这在拥有多个 React 应用程序时不起作用,是吗?

谢谢!