所以我正在为我正在构建的js游戏尝试recoilJS,它非常整洁,但是需要从组件更新原子只是感觉像是一种限制。
为了创建游戏循环,我将所有逻辑放在空组件上,以便能够读取和写入状态。即使我将在组件之外构建登录名,我也需要特别经常移动不同的统计数据。有一种方法可以在反应组件之外更新原子(不是通过钩子(?
我使用 RXJS 来帮助在组件外部设置 RecoilJS 值。
一开始,我创建了 4 个部分作为
- 主要部件
- 后坐力JS组件
- 原子文件
- 设置组件文件的后坐力JS外部值
1(.主要
import React from 'react';
import {
RecoilRoot
} from 'recoil';
function App() {
return (
<RecoilRoot>
<MainScreens />
<RecoilJSComponent/>
</RecoilRoot>
);
}
2(.后坐力JS组件
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(.原子文件
export const textState = atom({
key: 'textState'
default: ''
});
4(.在组件文件的值之外设置反冲JSs
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 上设置值
希望我的偶像能帮你解决问题
现在没有。为后坐力团队打开了一个建议。