Verwenden Sie Haken oder HOC treffen Sie Ihre Wahl
Mithilfe von Hooks oder dem HOC-Muster (Component höherer Ordnung) können Sie automatische Aktualisierungen durchführen, wenn sich Ihre Geschäfte ändern. Dies ist ein sehr leichter Ansatz ohne Rahmen.
useStore Hooks Methode zum Behandeln von Store-Updates
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 behandelt Store-Updates
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-Klasse
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;
}
}
Wie benutzt man
Bei Haken:
// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';
Im Fall von HOC:
// 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);
SICHERSTELLEN
So exportieren Sie Ihre Geschäfte als Singleton, um die Vorteile des globalen Wandels wie folgt zu nutzen:
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};
Dieser Ansatz ist ziemlich einfach und funktioniert für mich. Ich arbeite auch in großen Teams und benutze Redux und MobX und finde diese auch gut, aber nur viel Boilerplate. Ich persönlich mag meinen eigenen Ansatz nur, weil ich immer viel Code für etwas gehasst habe, das einfach sein kann, wenn es sein muss.
this.forceUpdate()die richtige Lösung ist, während der Rest aller Antworten und mehrere Kommentare gegen die Verwendung sindforceUpdate(). Wird das dann in Ordnung sein zu sagen, dass die Frage noch keine richtige Lösung / Antwort bekommen hat?