DD
Andrey Listochkin
какие люди! привет-привет!
✋
Size: a a a
2019 September 12
AM
Подшаманить чутка с бабелем и сделать customPrice.val()?.length
называется этот пропоузал optional chaining
DB
мені здається в цьому прикладі
val() мало б завжди повертати масив)Это выглядит, как инпут, тогда строка.
.val() должно всегда возвращать строку. И если это так, то нет смысла во втором условии, просто if input.val()SS
Доброго дня панство!
Подскажите по хукам и фетчам)
Есть компонент с хуком, в котором пристувует запрос:
Если в приложении использовать больше одного компонента, с таким эффектом (2 разных компонента проверяют если данных нет - сделать запрос).
В итоге вижу на каждый из компонентов
Как сделать так, что бы когда первый из компонентов начинает вызывать fetchAllCompanies
Пока что думаю только про debounce для fetchAllCompanies
Подскажите по хукам и фетчам)
Есть компонент с хуком, в котором пристувует запрос:
useEffect( () => {
const {isFetched, isFetching} = companiesState;
console.log( 'ExampleComponent: ready to be initiated' );
console.log( `ExampleComponent:isFetched: ${isFetched}, isFetching: ${isFetching}` );
if ( !isFetched && !isFetching ) {
console.log( 'ExampleComponent: fetch initiated' );
fetchAllCompanies( companiesDispatch );
}
}, [ companiesState.isFetched, companiesState.isFetching ] );Если в приложении использовать больше одного компонента, с таким эффектом (2 разных компонента проверяют если данных нет - сделать запрос).
В итоге вижу на каждый из компонентов
ExampleComponent: ready to be initiated
ExampleComponent:fetch initiated
ExampleComponent:isFetched: false, isFetching: false
OtherComponent:ready to be initiated
OtherComponent:fetch initiated
OtherComponent: isFetched: false, isFetching: false
Как сделать так, что бы когда первый из компонентов начинает вызывать fetchAllCompanies
что бы любой другой не делал лишний запрос а дождался выполнения?Пока что думаю только про debounce для fetchAllCompanies
функции, есть ли другие решения?G
Доброго дня панство!
Подскажите по хукам и фетчам)
Есть компонент с хуком, в котором пристувует запрос:
Если в приложении использовать больше одного компонента, с таким эффектом (2 разных компонента проверяют если данных нет - сделать запрос).
В итоге вижу на каждый из компонентов
Как сделать так, что бы когда первый из компонентов начинает вызывать fetchAllCompanies
Пока что думаю только про debounce для fetchAllCompanies
Подскажите по хукам и фетчам)
Есть компонент с хуком, в котором пристувует запрос:
useEffect( () => {
const {isFetched, isFetching} = companiesState;
console.log( 'ExampleComponent: ready to be initiated' );
console.log( `ExampleComponent:isFetched: ${isFetched}, isFetching: ${isFetching}` );
if ( !isFetched && !isFetching ) {
console.log( 'ExampleComponent: fetch initiated' );
fetchAllCompanies( companiesDispatch );
}
}, [ companiesState.isFetched, companiesState.isFetching ] );Если в приложении использовать больше одного компонента, с таким эффектом (2 разных компонента проверяют если данных нет - сделать запрос).
В итоге вижу на каждый из компонентов
ExampleComponent: ready to be initiated
ExampleComponent:fetch initiated
ExampleComponent:isFetched: false, isFetching: false
OtherComponent:ready to be initiated
OtherComponent:fetch initiated
OtherComponent: isFetched: false, isFetching: false
Как сделать так, что бы когда первый из компонентов начинает вызывать fetchAllCompanies
что бы любой другой не делал лишний запрос а дождался выполнения?Пока что думаю только про debounce для fetchAllCompanies
функции, есть ли другие решения?Думаю тебе стОит вынести логику фетча из компонента в отд. компонент
G
и каждый просто будет ждать его
G
Думаю тебе стОит вынести логику фетча из компонента в отд. компонент
"синглтон" если по умному
G
и перформанснее будет, вызов хуков тоже не бесплатен
SS
эээээ… на каждый запрос создавать компонент прослойку чисто для запроса данных?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
G
эээээ… на каждый запрос создавать компонент прослойку чисто для запроса данных?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
Зачем прослойку? У тебя стейт общий?
сделай что то типа
}
сделай что то типа
const Fetcher = () => {
useEffect(() => {
fetchAll().then(data => setState(data))
})
}const Component = () => {
const { someData, isFetching } = state
return (
isFetching ? <Spinner /> : <DisplayData data={someData} />
)}
G
<Fetcher />
<Component />
<Component />
...
G
Зачем прослойку? У тебя стейт общий?
сделай что то типа
}
сделай что то типа
const Fetcher = () => {
useEffect(() => {
fetchAll().then(data => setState(data))
})
}const Component = () => {
const { someData, isFetching } = state
return (
isFetching ? <Spinner /> : <DisplayData data={someData} />
)}
Или же заменить Fetcher на свой хук, что то типа useAllData()
AM
эээээ… на каждый запрос создавать компонент прослойку чисто для запроса данных?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
При 8 сторах и в среднем 4-5 запросов на каждый, 32 компонента fetch-прослойки?
вообще в компонентах не должно быть сайд эфектов
AM
сделай какой-то API client, который будет инициализироваться вместе с App
SS
<Page>
<CompaniesList/>
<SomeComponent>
<OtherComponent>
<CompaniesCount />
</OtherComponent>
</SomeComponent>
<Page>
Вот не хотелось думать о том, кто первый появится и пытаться кого-то засаспендить.
Переучиваюсь с Redux/MobX на хуки и просто хочу что бы состояние стора (описаного по примеру из https://kentcdodds.com/blog/how-to-use-react-context-effectively) влияло на то, будут ли другие компоненты делать fetch или дождутся когда прийдет первый запрос
AM
и дергай этот API client из миддлвары редакса
SS
ну да, редакс))
как без него?)
как без него?)
AM
а, если без редакса то все немного сложнее)
SS
why… why me…
SS
@alexeyraspopov а как вы делаете?) перечитал в чате твои рецепты для хуков (соотвественно и статья указаная выше где то в ваших обсжудениях хуков всплывала)