হুক ব্যবহার করুন বা এইচওসি আপনার বাছাই করুন
ব্যবহার আঙ্গুলসমূহ বা পরিকল্পিত (উচ্চতর ক্রম উপাদান) প্যাটার্ন , আপনি স্বয়ংক্রিয় আপডেটগুলো যখন আপনার দোকানে পরিবর্তন থাকতে পারে। এটি একটি কাঠামো ছাড়াই খুব হালকা ওজনের পদ্ধতির।
useStore হুক্স দোকান আপডেট হ্যান্ডেল করতে উপায়
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;
}
স্টোর এইচওসি হ্যান্ডেল স্টোর আপডেটগুলি
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';
এইচওসি ক্ষেত্রে:
// 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};
এই পদ্ধতিরটি বেশ সহজ এবং আমার পক্ষে কাজ করে। আমি বড় দলগুলিতেও কাজ করি এবং রেডাক্স এবং মবএক্স ব্যবহার করি এবং সেগুলি ভালও পাই তবে কেবল অনেকগুলি বয়লারপ্লেট। আমি ব্যক্তিগতভাবে আমার নিজস্ব পদ্ধতির পছন্দ করি কারণ আমি সর্বদা এমন কোনও কোডের জন্য প্রচুর কোড ঘৃণা করি যা আপনার প্রয়োজন হওয়ার পরে সহজ হতে পারে।
this.forceUpdate()অধিকার সমাধান যেহেতু সব উত্তর এবং বেশ কিছু মন্তব্য বাকি ব্যবহার বিরুদ্ধেforceUpdate()। তাহলে কি এই কথাটি বলা ঠিক হবে যে এখনও প্রশ্নের সঠিক সমাধান / উত্তর পাওয়া যায়নি?