हुक या HOC का उपयोग करें
हुक या एचओसी (उच्चतर ऑर्डर कंपोनेंट) पैटर्न का उपयोग करते हुए , आपके स्टोर बदलने पर आपके पास स्वचालित अपडेट हो सकते हैं। यह एक फ्रेमवर्क के बिना बहुत हल्का वजन दृष्टिकोण है।
स्टोर अपडेट्स को संभालने के लिए यूज़स्ट्रस्ट हूक तरीका
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 स्टोर अपडेट को संभालता है
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}
/>
);
}
};
};
}
सिंपलस्टोर क्लास
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;
}
}
कैसे इस्तेमाल करे
हुक के मामले में:
// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';
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);
यह सुनिश्चित
करें कि वैश्विक परिवर्तन का लाभ पाने के लिए एक सिंगलटन के रूप में अपने स्टोर का निर्यात करें:
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};
यह दृष्टिकोण बहुत सरल है और मेरे लिए काम करता है। मैं बड़ी टीमों में भी काम करता हूं और Redux और MobX का उपयोग करता हूं और उन लोगों को भी अच्छा लगता हूं लेकिन बहुत सारे बॉयलरप्लेट। मैं व्यक्तिगत रूप से अपने स्वयं के दृष्टिकोण को पसंद करता हूं क्योंकि मुझे हमेशा किसी ऐसी चीज के लिए बहुत सारे कोड से नफरत थी, जो तब सरल हो सकती है जब आपको इसकी आवश्यकता हो।
this.forceUpdate()सही समाधान है, जबकि सभी उत्तर और कई टिप्पणियां के बाकी का उपयोग कर के खिलाफ हैंforceUpdate()। क्या तब यह कहना ठीक होगा कि प्रश्न का उचित समाधान / उत्तर अभी तक नहीं मिला है?