所以我正在为我正在构建的一个 js 游戏尝试使用 recoilJS,它非常简洁,但是从组件更新原子的需要只是感觉像是一个限制。
为了创建一个游戏循环,我将所有逻辑放在空组件上,以便能够读取和写入状态。即使我将在组件之外构建登录,我也需要始终移动不同的统计信息。有一种方法可以更新反应组件之外的原子(不是通过钩子)?
所以我正在为我正在构建的一个 js 游戏尝试使用 recoilJS,它非常简洁,但是从组件更新原子的需要只是感觉像是一个限制。
为了创建一个游戏循环,我将所有逻辑放在空组件上,以便能够读取和写入状态。即使我将在组件之外构建登录,我也需要始终移动不同的统计信息。有一种方法可以更新反应组件之外的原子(不是通过钩子)?
我使用RXJS来帮助在组件之外设置 RecoilJS 值。
一开始,我创建了 4 个部分
1).主要
import React from 'react';
import {
RecoilRoot
} from 'recoil';
function App() {
return (
<RecoilRoot>
<MainScreens />
<RecoilJSComponent/>
</RecoilRoot>
);
}
2).RecoilJS 组件
import React from 'react';
import {
useRecoilCallback
} from 'recoil';
import { Subject } from 'rxjs';
export const setRecoil = new Subject();
const getRecoil = new Subject();
const returnRecoil = new Subject();
export const promiseGetRecoil = (recoilObj) => {
return new Promise(async (resolve, reject) => {
getRecoil.next(recoilObj)
returnRecoil.subscribe({
next: (value) => {
if (recoilObj === value.recoilObj) {
resolve(value.value)
}
}
});
})
}
export default function RecoilJSComponent() {
const setStore = useRecoilCallback(({ set }) => (n) => {
set(n.recoilObj, () => (n.value));
}, [])
const getStore = useRecoilCallback(({ snapshot }) => async (recoilObj) => {
const valueRecoilObj = await snapshot.getPromise(recoilObj);
returnRecoil.next({ recoilObj: recoilObj, value: valueRecoilObj })
}, [])
setRecoil.subscribe({
next: (value) => {
setStore(value)
}
});
getRecoil.subscribe({
next: (recoilObj) => {
getStore(recoilObj)
}
});
return null;
}
3).Atom文件
export const textState = atom({
key: 'textState'
default: ''
});
4).set RecoilJS外的组件文件的值
import API from './Api';
import { setRecoil } from './RecoilJSComponent'
import { textState } from './textState'
export const setValueReCoil = () => {
API()
.then(result => {
setRecoil({ recoilObj: textState, value: result })
})
.catch(ex => {
})
};
主要偶像在2和4
在数字 2 中,我创建使用 RXJS 通过组件设置值,并导出 RXJS 以在组件外部的 RecoilJS 上设置值
希望我的偶像能帮您解决问题
现在没有。为反冲团队打开了建议。