خب بببین اون کسایی که هوک رو درست کردن خیلی خفنن :)
تو ویدیو آموزش هوکام این قضیه رو توضیح دادم
کاری که کردن این بوده که به جای آبجکت از آرایه استفاده کردن برای return کردن متغیرها از هوک
آبجکت رو بخوای destructure کنی باید اسماشون رو یکی بزاری یعنی اگر همچین آبجکتی داشته باشی:
const data = { name: "Nima", lastname: "Arefi" }
و اگر این متغیر نتیجه هوک باشه باید اینطوری ازش استفاده کنی
function useBisar() {
return data
}
const { name, lastname } = useBisar()
حتما باید اسم متغیرها با key های آبجکتی که هوک return میکنه یکی باشه
این خوبیش اینکه دیگه ترتیب مهم نیست، یعنی میشه جای lastname رو اول گرفت بعد name
const { name, lastname } = useBisar()
یا فقط یکیشون رو استفاده کنی
const { lastname } = useBisar()
حالا اگر data آرایه باشه قضیه یکم فرق داره
const data = ["Nima", "Arefi"]
برای استفاده باید یکم تغییر بدیم کدو
اول اینکه به جای ,{,} باید از [] استفاده کنیم
const [name, lastname] = useBisar()
نکته دوم این هستش که آرایه بر اساس ایندکس کار میکنه و براساس key نه! این یعنی اینکه میتونیم هر اسمی که دلمون میخواد رو به متغیرامون بدیم
const [ felan, bisar ] = useBisar()
این روش یه مشکلش اینکه برنامه نویس باید ایندکسها رو بلد باشه یا اینکه کامنت بزاره توضیح بده کدشو
چون اگر یکی فردا یه برنامه نویس جدید بیاد و از useBisar استفاده کنه و ندونه اولین ایدنکس آرایه name هستش یا lastname کارش سخت میشه!
مشکل دومش اینکه اگر ما فقط lastname رو لازم داشته باشیم باید name رو هم بخونیم یا اینکه جاشو خالی بزاریم
const [, lastname] = useBisar()
که خب شرایطی که هوکهای ریاکت دارن با این قضییه ارایه هیچ مشکلی نداره و خیلی خوب باهم کنار میان :)
حالا برای جواب به سوال شما میشه اینکارو کرد
const [user, userDispatch] = useReducer (userReducer,{});
const [items, ItemDispatch] = useReducer (itemReducer,[])
تو ویدیو آموزش هوکام این قضیه رو توضیح دادم
کاری که کردن این بوده که به جای آبجکت از آرایه استفاده کردن برای return کردن متغیرها از هوک
آبجکت رو بخوای destructure کنی باید اسماشون رو یکی بزاری یعنی اگر همچین آبجکتی داشته باشی:
const data = { name: "Nima", lastname: "Arefi" }
و اگر این متغیر نتیجه هوک باشه باید اینطوری ازش استفاده کنی
function useBisar() {
return data
}
const { name, lastname } = useBisar()
حتما باید اسم متغیرها با key های آبجکتی که هوک return میکنه یکی باشه
این خوبیش اینکه دیگه ترتیب مهم نیست، یعنی میشه جای lastname رو اول گرفت بعد name
const { name, lastname } = useBisar()
یا فقط یکیشون رو استفاده کنی
const { lastname } = useBisar()
حالا اگر data آرایه باشه قضیه یکم فرق داره
const data = ["Nima", "Arefi"]
برای استفاده باید یکم تغییر بدیم کدو
اول اینکه به جای ,{,} باید از [] استفاده کنیم
const [name, lastname] = useBisar()
نکته دوم این هستش که آرایه بر اساس ایندکس کار میکنه و براساس key نه! این یعنی اینکه میتونیم هر اسمی که دلمون میخواد رو به متغیرامون بدیم
const [ felan, bisar ] = useBisar()
این روش یه مشکلش اینکه برنامه نویس باید ایندکسها رو بلد باشه یا اینکه کامنت بزاره توضیح بده کدشو
چون اگر یکی فردا یه برنامه نویس جدید بیاد و از useBisar استفاده کنه و ندونه اولین ایدنکس آرایه name هستش یا lastname کارش سخت میشه!
مشکل دومش اینکه اگر ما فقط lastname رو لازم داشته باشیم باید name رو هم بخونیم یا اینکه جاشو خالی بزاریم
const [, lastname] = useBisar()
که خب شرایطی که هوکهای ریاکت دارن با این قضییه ارایه هیچ مشکلی نداره و خیلی خوب باهم کنار میان :)
حالا برای جواب به سوال شما میشه اینکارو کرد
const [user, userDispatch] = useReducer (userReducer,{});
const [items, ItemDispatch] = useReducer (itemReducer,[])
export const ToastContext = React.createContext()
function ToastProvider({ children }) {
const [ state, dispatch ] = React.useReducer(PARAMS...)
return (
<ToastContext.Provider state={ { state: state, dispatch: dispatch } }>
{children}
</ToastContext.Provider>
)
}
===========
export const ToastContext = React.createContext()
export const ToastContextUpdater = React.createContext()
function ToastProvider({ children }) {
const [ state, dispatch ] = React.useReducer(PARAMS...)
return (
<ToastContext.Provider state={state}>
<ToastContextUpdater.Provider state={dispatch}>
{children}
</ToastContextUpdater.Provider>
</ToastContext.Provider>
)
}
function ToastProvider({ children }) {
const [ state, dispatch ] = React.useReducer(PARAMS...)
return (
<ToastContext.Provider state={ { state: state, dispatch: dispatch } }>
{children}
</ToastContext.Provider>
)
}
===========
export const ToastContext = React.createContext()
export const ToastContextUpdater = React.createContext()
function ToastProvider({ children }) {
const [ state, dispatch ] = React.useReducer(PARAMS...)
return (
<ToastContext.Provider state={state}>
<ToastContextUpdater.Provider state={dispatch}>
{children}
</ToastContextUpdater.Provider>
</ToastContext.Provider>
)
}