আপনি যে দুর্দান্ত সতর্কতা পেয়েছিলেন ঠিক তেমনই আপনি এমন কিছু করার চেষ্টা করছেন যা প্রতিক্রিয়াবিরোধী একটি প্যাটার্ন is এটি একটি নো প্রতিক্রিয়া অভিভাবকদের কাছ থেকে সন্তানের সম্পর্কের ক্ষেত্রে কোনও আনমাউন্ট ঘটানোর উদ্দেশ্য। এখন আপনি যদি কোনও শিশু নিজেই আনমাউন্ট করতে চান, তবে আপনি সন্তানের দ্বারা চালিত অভিভাবকের রাজ্যের পরিবর্তনের সাথে এটি অনুকরণ করতে পারেন। আমাকে কোডে আপনাকে দেখাতে দিন
class Child extends React.Component {
constructor(){}
dismiss() {
this.props.unmountMe();
}
render(){
// code
}
}
class Parent ...
constructor(){
super(props)
this.state = {renderChild: true};
this.handleChildUnmount = this.handleChildUnmount.bind(this);
}
handleChildUnmount(){
this.setState({renderChild: false});
}
render(){
// code
{this.state.renderChild ? <Child unmountMe={this.handleChildUnmount} /> : null}
}
}
এটি একটি খুব সাধারণ উদাহরণ। তবে আপনি কোনও ক্রিয়াকলাপ পিতামাতার কাছে যাওয়ার কোনও উপায় দেখতে পারেন
এটি বলা হচ্ছে যে আপনার স্টোরটি যখন রেন্ডার হয় তখন আপনার স্টোরটিকে সঠিক তথ্য রাখার অনুমতি দেওয়ার জন্য আপনার সম্ভবত স্টোরের (প্রেরণ ক্রিয়া) কাজ করা উচিত
দুটি পৃথক অ্যাপ্লিকেশনের জন্য আমি ত্রুটি / স্থিতির বার্তা করেছি, উভয়ই স্টোর দিয়ে গিয়েছিলাম। এটি পছন্দসই পদ্ধতি ... আপনি চাইলে আমি কীভাবে এটি করতে পারি তার জন্য কিছু কোড পোস্ট করতে পারি।
সম্পাদনা: এখানে আমি কীভাবে প্রতিক্রিয়া / রেডাক্স / টাইপস্ক্রিপ্ট ব্যবহার করে একটি বিজ্ঞপ্তি সিস্টেম সেট আপ করব
প্রথমে কিছু বিষয় লক্ষণীয়। এটি টাইপস্ক্রিপ্টে তাই আপনার প্রকারের ঘোষণাগুলি সরিয়ে ফেলতে হবে :)
আমি অপারেশনের জন্য এনপিএম প্যাকেজ লোড্যাশ এবং ইনলাইন ক্লাসনেম অ্যাসাইনমেন্টের জন্য ক্লাসের নামগুলি (সিএক্স ওরফে) ব্যবহার করছি।
এই সেটআপটির সৌন্দর্য হ'ল আমি ক্রিয়াকলাপটি তৈরি করার সময় প্রতিটি বিজ্ঞপ্তির জন্য একটি অনন্য শনাক্তকারী ব্যবহার করি। (যেমন notify_id)। এই অনন্য আইডি হ'ল ক Symbol()। আপনি যদি যেকোন সময় কোনও বিজ্ঞপ্তি মুছে ফেলতে চান তবে আপনি জানেন যে কোনটি অপসারণ করতে হবে। এই বিজ্ঞপ্তি সিস্টেমটি আপনাকে যতটা চায় স্তুপ করতে দেয় এবং অ্যানিমেশনটি শেষ হয়ে গেলে তারা চলে যায়। আমি অ্যানিমেশন ইভেন্টের দিকে ঝুঁকছি এবং এটি শেষ হয়ে গেলে আমি বিজ্ঞপ্তিটি সরাতে কিছু কোড ট্রিগার করব। অ্যানিমেশন কলব্যাকটি প্রজ্বলিত না হয় সেক্ষেত্রে বিজ্ঞপ্তিটি সরাতে আমি একটি ফ্যালব্যাক সময়সীমাও সেট আপ করেছি।
প্রজ্ঞাপন-actions.ts
import { USER_SYSTEM_NOTIFICATION } from '../constants/action-types';
interface IDispatchType {
type: string;
payload?: any;
remove?: Symbol;
}
export const notifySuccess = (message: any, duration?: number) => {
return (dispatch: Function) => {
dispatch({ type: USER_SYSTEM_NOTIFICATION, payload: { isSuccess: true, message, notify_id: Symbol(), duration } } as IDispatchType);
};
};
export const notifyFailure = (message: any, duration?: number) => {
return (dispatch: Function) => {
dispatch({ type: USER_SYSTEM_NOTIFICATION, payload: { isSuccess: false, message, notify_id: Symbol(), duration } } as IDispatchType);
};
};
export const clearNotification = (notifyId: Symbol) => {
return (dispatch: Function) => {
dispatch({ type: USER_SYSTEM_NOTIFICATION, remove: notifyId } as IDispatchType);
};
};
প্রজ্ঞাপন-reducer.ts
const defaultState = {
userNotifications: []
};
export default (state: ISystemNotificationReducer = defaultState, action: IDispatchType) => {
switch (action.type) {
case USER_SYSTEM_NOTIFICATION:
const list: ISystemNotification[] = _.clone(state.userNotifications) || [];
if (_.has(action, 'remove')) {
const key = parseInt(_.findKey(list, (n: ISystemNotification) => n.notify_id === action.remove));
if (key) {
// mutate list and remove the specified item
list.splice(key, 1);
}
} else {
list.push(action.payload);
}
return _.assign({}, state, { userNotifications: list });
}
return state;
};
app.tsx
আপনার আবেদনের জন্য বেস রেন্ডারে আপনি বিজ্ঞপ্তিগুলি সরবরাহ করতে পারেন
render() {
const { systemNotifications } = this.props;
return (
<div>
<AppHeader />
<div className="user-notify-wrap">
{ _.get(systemNotifications, 'userNotifications') && Boolean(_.get(systemNotifications, 'userNotifications.length'))
? _.reverse(_.map(_.get(systemNotifications, 'userNotifications', []), (n, i) => <UserNotification key={i} data={n} clearNotification={this.props.actions.clearNotification} />))
: null
}
</div>
<div className="content">
{this.props.children}
</div>
</div>
);
}
ব্যবহারকারী-notification.tsx
ব্যবহারকারী বিজ্ঞপ্তি ক্লাস
/*
Simple notification class.
Usage:
<SomeComponent notifySuccess={this.props.notifySuccess} notifyFailure={this.props.notifyFailure} />
these two functions are actions and should be props when the component is connect()ed
call it with either a string or components. optional param of how long to display it (defaults to 5 seconds)
this.props.notifySuccess('it Works!!!', 2);
this.props.notifySuccess(<SomeComponentHere />, 15);
this.props.notifyFailure(<div>You dun goofed</div>);
*/
interface IUserNotifyProps {
data: any;
clearNotification(notifyID: symbol): any;
}
export default class UserNotify extends React.Component<IUserNotifyProps, {}> {
public notifyRef = null;
private timeout = null;
componentDidMount() {
const duration: number = _.get(this.props, 'data.duration', '');
this.notifyRef.style.animationDuration = duration ? `${duration}s` : '5s';
// fallback incase the animation event doesn't fire
const timeoutDuration = (duration * 1000) + 500;
this.timeout = setTimeout(() => {
this.notifyRef.classList.add('hidden');
this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
}, timeoutDuration);
TransitionEvents.addEndEventListener(
this.notifyRef,
this.onAmimationComplete
);
}
componentWillUnmount() {
clearTimeout(this.timeout);
TransitionEvents.removeEndEventListener(
this.notifyRef,
this.onAmimationComplete
);
}
onAmimationComplete = (e) => {
if (_.get(e, 'animationName') === 'fadeInAndOut') {
this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
}
}
handleCloseClick = (e) => {
e.preventDefault();
this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
}
assignNotifyRef = target => this.notifyRef = target;
render() {
const {data, clearNotification} = this.props;
return (
<div ref={this.assignNotifyRef} className={cx('user-notification fade-in-out', {success: data.isSuccess, failure: !data.isSuccess})}>
{!_.isString(data.message) ? data.message : <h3>{data.message}</h3>}
<div className="close-message" onClick={this.handleCloseClick}>+</div>
</div>
);
}
}