有没有办法在组件外部更新 recoilJS 的状态?
There is a way to update states on recoilJS outside of component?
所以我正在为我正在构建的 js 游戏尝试使用 recoilJS,它非常简洁,但是从组件更新原子的需要感觉只是一个限制。
为了创建一个游戏循环,我将所有逻辑放在空组件上,这样我就可以读取和写入状态。即使我将在组件外部构建登录,我也特别需要始终移动不同的统计信息。有一种方法可以在 React 组件之外更新原子(不是通过钩子)?
现在没有。为反冲团队打开了一个建议。
我使用 RXJS 来帮助在组件外部设置 RecoilJS 值。
一开始,我创建了4个部分
- 主要成分
- RecoilJS component
- Atom file
- 设置组件文件的RecoilJS外部值
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 outside the value of the component file
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 上设置值
希望我的偶像能帮您解决问题
所以我正在为我正在构建的 js 游戏尝试使用 recoilJS,它非常简洁,但是从组件更新原子的需要感觉只是一个限制。
为了创建一个游戏循环,我将所有逻辑放在空组件上,这样我就可以读取和写入状态。即使我将在组件外部构建登录,我也特别需要始终移动不同的统计信息。有一种方法可以在 React 组件之外更新原子(不是通过钩子)?
现在没有。为反冲团队打开了一个建议。
我使用 RXJS 来帮助在组件外部设置 RecoilJS 值。
一开始,我创建了4个部分
- 主要成分
- RecoilJS component
- Atom file
- 设置组件文件的RecoilJS外部值
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 outside the value of the component file
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 上设置值
希望我的偶像能帮您解决问题