আমি যে পদ্ধতির পরামর্শ দিচ্ছি তা কিছুটা ভার্বোস তবে এটি জটিল অ্যাপ্লিকেশনগুলিতে বেশ ভালভাবে স্কেল করে দেখতে পেয়েছি। আপনি যখন কোনও মডেল দেখাতে চান, কোনও ক্রিয়াটি বর্ণনা করে যা কোনওটি বর্ণনা করে আপনি মডেলটি দেখতে চান তা :
মডেলটি দেখানোর জন্য অ্যাকশন প্রেরণ
this.props.dispatch({
type: 'SHOW_MODAL',
modalType: 'DELETE_POST',
modalProps: {
postId: 42
}
})
(স্ট্রিংগুলি অবশ্যই ধ্রুবক হতে পারে; আমি সরলতার জন্য ইনলাইন স্ট্রিং ব্যবহার করছি))
মডেল রাজ্য পরিচালনা করতে একটি রিডুসার রচনা
তারপরে নিশ্চিত হয়ে নিন যে আপনার কাছে এমন একটি হ্রাসকারী রয়েছে যা কেবল এই মানগুলি গ্রহণ করে:
const initialState = {
modalType: null,
modalProps: {}
}
function modal(state = initialState, action) {
switch (action.type) {
case 'SHOW_MODAL':
return {
modalType: action.modalType,
modalProps: action.modalProps
}
case 'HIDE_MODAL':
return initialState
default:
return state
}
}
/* .... */
const rootReducer = combineReducers({
modal,
/* other reducers */
})
গ্রেট! এখন, আপনি যখন কোনও অ্যাকশন প্রেরণ state.modalকরবেন, বর্তমানে দৃশ্যমান মডেল উইন্ডো সম্পর্কিত তথ্য অন্তর্ভুক্ত করার জন্য আপডেট হবে will
রুট মডেল উপাদান লিখছেন
আপনার উপাদান স্তরক্রমের মূলে, <ModalRoot>Redux স্টোরের সাথে যুক্ত একটি উপাদান যুক্ত করুন। এটি শুনতে state.modalএবং একটি উপযুক্ত মডেল উপাদান প্রদর্শন করবে , এর কাছ থেকে প্রপস ফরোয়ার্ড করবে state.modal.modalProps।
// These are regular React components we will write soon
import DeletePostModal from './DeletePostModal'
import ConfirmLogoutModal from './ConfirmLogoutModal'
const MODAL_COMPONENTS = {
'DELETE_POST': DeletePostModal,
'CONFIRM_LOGOUT': ConfirmLogoutModal,
/* other modals */
}
const ModalRoot = ({ modalType, modalProps }) => {
if (!modalType) {
return <span /> // after React v15 you can return null here
}
const SpecificModal = MODAL_COMPONENTS[modalType]
return <SpecificModal {...modalProps} />
}
export default connect(
state => state.modal
)(ModalRoot)
আমরা এখানে কি করেছি? ModalRootবর্তমান সার্চ modalTypeএবং modalPropsথেকে state.modalযা এটি সংযুক্ত করা হয়, এবং উপস্থাপনা একটি সংশ্লিষ্ট কম্পোনেন্ট যেমন DeletePostModalবাConfirmLogoutModal । প্রতিটি মডেল একটি উপাদান!
নির্দিষ্ট মডেল উপাদান রচনা
এখানে কোনও সাধারণ নিয়ম নেই। তারা শুধু যে সমস্ত উপাদান, কর্ম প্রাণবধ দোকান রাজ্য থেকে কিছু পড়তে পারেন প্রতিক্রিয়া হয় এবং মাত্র মোডাল হতে ঘটতে ।
উদাহরণস্বরূপ, দেখতে DeletePostModalহতে পারে:
import { deletePost, hideModal } from '../actions'
const DeletePostModal = ({ post, dispatch }) => (
<div>
<p>Delete post {post.name}?</p>
<button onClick={() => {
dispatch(deletePost(post.id)).then(() => {
dispatch(hideModal())
})
}}>
Yes
</button>
<button onClick={() => dispatch(hideModal())}>
Nope
</button>
</div>
)
export default connect(
(state, ownProps) => ({
post: state.postsById[ownProps.postId]
})
)(DeletePostModal)
DeletePostModalদোকান থেকে সংযুক্ত করা হয়, তাই এটি পোস্টের শিরোনাম প্রদর্শন এবং কোন সংযুক্ত উপাদান মত কাজ করে কিনা: এটা, কর্ম প্রাণবধ করতে পারেন তা সহhideModal যখন এটা নিজেই আড়াল করা প্রয়োজন।
একটি উপস্থাপক উপাদান আহরণ করা হচ্ছে
প্রতিটি "নির্দিষ্ট" মডেলের জন্য একই লেআউট যুক্তিকে কপি-পেস্ট করা বিশ্রী হবে। কিন্তু আপনার উপাদান আছে, তাই না? সুতরাং আপনি একটি উপস্থাপনা নিষ্কাশন করতে পারেন <Modal> উপাদানটি যা নির্দিষ্ট মডেলগুলি কী করে তা জানেন না তবে তারা কীভাবে দেখায় তা পরিচালনা করে।
তারপরে, নির্দিষ্ট মডেলগুলি যেমন DeletePostModalরেন্ডারিংয়ের জন্য এটি ব্যবহার করতে পারে:
import { deletePost, hideModal } from '../actions'
import Modal from './Modal'
const DeletePostModal = ({ post, dispatch }) => (
<Modal
dangerText={`Delete post ${post.name}?`}
onDangerClick={() =>
dispatch(deletePost(post.id)).then(() => {
dispatch(hideModal())
})
})
/>
)
export default connect(
(state, ownProps) => ({
post: state.postsById[ownProps.postId]
})
)(DeletePostModal)
আপনার প্রাপকদের একটি সেট নিয়ে আসা আপনার উপর নির্ভর করবে যা <Modal>আপনার অ্যাপ্লিকেশনটিতে গ্রহণ করতে পারে তবে আমি ধারণা করব যে আপনার কাছে বিভিন্ন ধরণের মডেল থাকতে পারে (যেমন তথ্য মডেল, কনফার্মেশন মডেল, ইত্যাদি) এবং তাদের জন্য বেশ কয়েকটি শৈলী।
অ্যাক্সেসিবিলিটি এবং বাইরের ক্লিক বা এস্কেপ কীতে লুকানো
মডেলগুলি সম্পর্কে সর্বশেষ গুরুত্বপূর্ণ অংশটি হ'ল ব্যবহারকারীরা যখন বাইরে ক্লিক করেন বা এস্কেপ প্রেস করেন তখন আমরা সেগুলি আড়াল করতে চাই।
এটি প্রয়োগের জন্য আপনাকে পরামর্শ দেওয়ার পরিবর্তে, আমি আপনাকে নিজে এটি প্রয়োগ না করার পরামর্শ দিচ্ছি। অ্যাক্সেসযোগ্যতার কথা বিবেচনা করে সঠিকভাবে পাওয়া শক্ত।
পরিবর্তে, আমি আপনাকে একটি অ্যাক্সেসযোগ্য অফ-শেল্ফ মডেল উপাদান যেমন ব্যবহার করার পরামর্শ দিচ্ছি react-modal। এটি সম্পূর্ণরূপে স্বনির্ধারিত, আপনি এটির ভিতরে যা কিছু চান তা রাখতে পারেন তবে এটি অ্যাক্সেসযোগ্যতাটি সঠিকভাবে পরিচালনা করে যাতে অন্ধ লোকেরা এখনও আপনার মডেলটি ব্যবহার করতে পারে।
এমনকি আপনি react-modalনিজের নিজের মধ্যে মোড়ানো করতে পারেন <Modal>যা আপনার অ্যাপ্লিকেশনগুলির জন্য নির্দিষ্ট প্রপস গ্রহণ করে এবং শিশু বোতাম বা অন্যান্য সামগ্রী তৈরি করে। এটি সব ঠিক উপাদান!
অন্যান্য পন্থা
এটি করার একাধিক উপায় রয়েছে।
কিছু লোক এই পদ্ধতির ভার্বোসটি পছন্দ করেন না এবং <Modal>এমন উপাদানগুলি পছন্দ করেন যা তারা তাদের উপাদানগুলির ভিতরে ডান "পোর্টাল" নামে একটি কৌশল দিয়ে রেন্ডার করতে পারেন । পোর্টালগুলি আপনাকে আসলে আপনার ভিতরে একটি উপাদান রেন্ডার করতে দেয় এটা করে DOM, যা মোডাল জন্য খুব সুবিধাজনক একটি পূর্ব-নির্ধারিত স্থানে প্রতিদান দেবেন।
প্রকৃতপক্ষে react-modalআমি এর সাথে লিঙ্ক রেখেছি ইতোমধ্যে অভ্যন্তরীণভাবে এত প্রযুক্তিগতভাবে আপনাকে শীর্ষ থেকে রেন্ডার করার দরকার নেই। আমি এখনও মডেলটিকে দেখানোর উপাদানটি থেকে প্রদর্শন করতে চাইলে এটি ডিকুয়াল করে মনে করি তবে আপনি react-modalসরাসরি আপনার উপাদানগুলি থেকেও ব্যবহার করতে পারেন এবং আমি উপরে যা লিখেছি তার বেশিরভাগ এড়িয়ে যেতে পারি।
আমি আপনাকে উভয় পন্থা বিবেচনা করতে, সেগুলির সাথে পরীক্ষা করার জন্য এবং আপনার অ্যাপ এবং আপনার দলের জন্য যা ভাল লাগে তা চয়ন করতে উত্সাহিত করি।
