AG
Ещё раз повторюсь что я просто в восторге от такой мощной системы типов в ts, прям теку
const MyComponent: React.FC<PropType & MySecondProp & { children: number }> = ({children, some Props}) => {
...
return <>{children}</>;
}
Size: a a a
2021 January 29
AG
И советую описывать компоненты реакта как:
AG
Именно как константу с типом реакт функционального компонента. И потом уже описываешь его функцией....
AG
А не так что у тебя просто функция, и она считается реакт компонентом
AG
Да перед const можно сразу писать export
AG
Я просто советую, а не обязываю...
MZ
Привет, подскажите, можно ли сделать этот запрос лучше или все правильно сделано? Все работает, но реакт пишет что утечка памяти, я потыкал и понял что проблема в этом action.js
export const takeDashboardData = (
companyId:string, token:string, limit:number) =>
async (dispatch: Dispatch<dashboardDataDispatchTypes>) => {
dispatch({
type: DASHBOARD_SHOW_LOADING
})
const url = "https://api./users"
const urlLimit = `limit=${limit}&companyId=`
const options = {headers: {"Authorization": `Bearer ${token}`}}
const fullUrl = url + urlLimit + companyId
try {
const response = await axios.get(fullUrl , options)
dispatch({
type: DASHBOARD_EMPLOYEE_DATA,
payload: response.data.users
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
} catch (e) {
dispatch({
type: DASHBOARD_LOADING_ERROR
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
}
}
MZ
И я так понимаю что я что-то криво сделал, но не могу понять что(
AG
Max Zhukov
Привет, подскажите, можно ли сделать этот запрос лучше или все правильно сделано? Все работает, но реакт пишет что утечка памяти, я потыкал и понял что проблема в этом action.js
export const takeDashboardData = (
companyId:string, token:string, limit:number) =>
async (dispatch: Dispatch<dashboardDataDispatchTypes>) => {
dispatch({
type: DASHBOARD_SHOW_LOADING
})
const url = "https://api./users"
const urlLimit = `limit=${limit}&companyId=`
const options = {headers: {"Authorization": `Bearer ${token}`}}
const fullUrl = url + urlLimit + companyId
try {
const response = await axios.get(fullUrl , options)
dispatch({
type: DASHBOARD_EMPLOYEE_DATA,
payload: response.data.users
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
} catch (e) {
dispatch({
type: DASHBOARD_LOADING_ERROR
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
}
}
Url так и должен быть?
MZ
Url так и должен быть?
Url я просто удалил, но код рабочий только выдает такую ошибку
AG
А вообще я не вижу ошибки...
MZ
AG
Ты замыааешься на данные компонента, который может быть размонтирован
AG
Max Zhukov
Привет, подскажите, можно ли сделать этот запрос лучше или все правильно сделано? Все работает, но реакт пишет что утечка памяти, я потыкал и понял что проблема в этом action.js
export const takeDashboardData = (
companyId:string, token:string, limit:number) =>
async (dispatch: Dispatch<dashboardDataDispatchTypes>) => {
dispatch({
type: DASHBOARD_SHOW_LOADING
})
const url = "https://api./users"
const urlLimit = `limit=${limit}&companyId=`
const options = {headers: {"Authorization": `Bearer ${token}`}}
const fullUrl = url + urlLimit + companyId
try {
const response = await axios.get(fullUrl , options)
dispatch({
type: DASHBOARD_EMPLOYEE_DATA,
payload: response.data.users
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
} catch (e) {
dispatch({
type: DASHBOARD_LOADING_ERROR
})
dispatch({
type: DASHBOARD_HIDE_LOADING
})
}
}
Как ты эту функцию используешь?
MZ
Ты замыааешься на данные компонента, который может быть размонтирован
useEffect(() => {
// Taking user id, token, companyId
const userId = window.sessionStorage.getItem("userId")
const userToken = window.sessionStorage.getItem("token")
const companyId = window.sessionStorage.getItem("companyId")
// dispatch and take all user Information, Loading data
userId
&& userToken
&& companyId
&& dispatch(takeUserInfo(userId, userToken))
&& dispatch(takeDashboardData(companyId, userToken, 4))
}, [dispatch])
return (
loading ? (
<h1>Loading</h1>
) : (
<Dashboard />
)
}AG
Max Zhukov
useEffect(() => {
// Taking user id, token, companyId
const userId = window.sessionStorage.getItem("userId")
const userToken = window.sessionStorage.getItem("token")
const companyId = window.sessionStorage.getItem("companyId")
// dispatch and take all user Information, Loading data
userId
&& userToken
&& companyId
&& dispatch(takeUserInfo(userId, userToken))
&& dispatch(takeDashboardData(companyId, userToken, 4))
}, [dispatch])
return (
loading ? (
<h1>Loading</h1>
) : (
<Dashboard />
)
}Ты в биспатч отправляешь асинхронную функцию? Это как? Я думал в диспатч только экшоны отправляются
AG
И диспатч то вроде как не меняется, если ты стор конечно не меняешь на ходу
AG
И зачем у тебя там &&?
MZ
Не очень понимаю, но все работает нормуль кроме этой ошибки и при чем она срабатывает только если я в компоненте для отрисовки указываю loading, если вместо него поставлю employee, который диспачится в том же action, то ошибка уйдет
MZ
reducer
export const dashboardDataReducer = (
state: DefaultStateI = initialState,
action: dashboardDataDispatchTypes):DefaultStateI => {
switch (action.type) {
case DASHBOARD_EMPLOYEE_DATA:
return {
error: false,
employeeData: action.payload
}
case DASHBOARD_LOADING_ERROR:
return {
error: true
}
case DASHBOARD_SHOW_LOADING:
return {
loading: true
}
case DASHBOARD_HIDE_LOADING:
return {
loading: false
}
default:
return state
}
}