kanca kullanın veya HOC seçiminizi yapın
Kullanılması kancaları veya HOC (yüksek mertebeden bileşeni) desen senin saklar değiştirmek zaman otomatik güncelleştirmeler olabilir. Bu, çerçevesiz çok hafif bir yaklaşımdır.
useStore Kancalar mağaza güncellemeleri halletmenin yolu
interface ISimpleStore {
on: (ev: string, fn: () => void) => void;
off: (ev: string, fn: () => void) => void;
}
export default function useStore<T extends ISimpleStore>(store: T) {
const [storeState, setStoreState] = useState({store});
useEffect(() => {
const onChange = () => {
setStoreState({store});
}
store.on('change', onChange);
return () => {
store.off('change', onChange);
}
}, []);
return storeState.store;
}
withStores HOC tanıtıcı deposu güncellemeleri
export default function (...stores: SimpleStore[]) {
return function (WrappedComponent: React.ComponentType<any>) {
return class WithStore extends PureComponent<{}, {lastUpdated: number}> {
constructor(props: React.ComponentProps<any>) {
super(props);
this.state = {
lastUpdated: Date.now(),
};
this.stores = stores;
}
private stores?: SimpleStore[];
private onChange = () => {
this.setState({lastUpdated: Date.now()});
};
componentDidMount = () => {
this.stores &&
this.stores.forEach((store) => {
// each store has a common change event to subscribe to
store.on('change', this.onChange);
});
};
componentWillUnmount = () => {
this.stores &&
this.stores.forEach((store) => {
store.off('change', this.onChange);
});
};
render() {
return (
<WrappedComponent
lastUpdated={this.state.lastUpdated}
{...this.props}
/>
);
}
};
};
}
SimpleStore sınıfı
import AsyncStorage from '@react-native-community/async-storage';
import ee, {Emitter} from 'event-emitter';
interface SimpleStoreArgs {
key?: string;
defaultState?: {[key: string]: any};
}
export default class SimpleStore {
constructor({key, defaultState}: SimpleStoreArgs) {
if (key) {
this.key = key;
// hydrate here if you want w/ localState or AsyncStorage
}
if (defaultState) {
this._state = {...defaultState, loaded: false};
} else {
this._state = {loaded: true};
}
}
protected key: string = '';
protected _state: {[key: string]: any} = {};
protected eventEmitter: Emitter = ee({});
public setState(newState: {[key: string]: any}) {
this._state = {...this._state, ...newState};
this.eventEmitter.emit('change');
if (this.key) {
// store on client w/ localState or AsyncStorage
}
}
public get state() {
return this._state;
}
public on(ev: string, fn:() => void) {
this.eventEmitter.on(ev, fn);
}
public off(ev: string, fn:() => void) {
this.eventEmitter.off(ev, fn);
}
public get loaded(): boolean {
return !!this._state.loaded;
}
}
Nasıl kullanılır
Kanca durumunda:
// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';
HOC söz konusu olduğunda:
// inside your code get/set your store and stuff just updates
const val = myStore.myProp;
myOtherStore.myProp = 'something';
// return your wrapped component like so
export default withStores(myStore)(MyComponent);
EMİN OLUN
Küresel değişimden faydalanabilmek için mağazalarınızı tekil olarak ihraç etmek:
class MyStore extends SimpleStore {
public get someProp() {
return this._state.someProp || '';
}
public set someProp(value: string) {
this.setState({...this._state, someProp: value});
}
}
// this is a singleton
const myStore = new MyStore();
export {myStore};
Bu yaklaşım oldukça basit ve benim için çalışıyor. Ayrıca büyük ekiplerde çalışıyorum ve Redux ve MobX kullanıyorum ve bunların da iyi olduğunu düşünüyorum, ancak çok fazla kazan plakası buluyorum. Ben şahsen benim kendi yaklaşımımı seviyorum çünkü olması gerektiğinde basit olabilecek bir şey için her zaman çok koddan nefret ediyordum.
this.forceUpdate()tüm cevapları ve çok sayıda yorumların kalanı kullanılmasına karşıdır oysa doğru çözümdürforceUpdate(). O zaman sorunun henüz uygun bir çözüm / cevap alamadığını söylemek iyi olur mu?