Redux odeslání akce trvá příliš dlouho, i přes reduktor funkce připojené provádí rychle

Question 1

Já mám chrome porušení chyby typu setTimeout handler took 500+ ms které jsou vážně blokuje moje app, a některé se dějí pokaždé, když se akční připojené k websocket náklad přijde a je zpracována. Zkoušel jsem to ladění s chrome profiler, a to je to, co to ukazuje přesně v okamžiku, kdy náklad je zpracován.

https://imgur.com/a/ZnS0ZlG

Na (anonymous) funkce je v reduktoru a čas běžel se shoduje s chybou.

Tady je nějaký kód.

// ACTION
const someAction = (data): Thunk => async dispatch => {
  try {
    const t = performance.now();
    dispatch(someAction(data));
    console.log('after dispatching cellReceived', performance.now() - t); 
    // logs 800+ ms and is consistent with chrome violation errors (setTimeout handler took <N> ms
  }
}

// REDUCER
  export default(state: State, action: Actions) {
  switch(action.type) {
    ...
    case ActionType.someAction: {
      const { data } = action.payload;
      const t = performance.now();
      (... do calculations here)
      console.log(performance.now() - t) // logs 30ms
    }
  }
}

Velice bych ocenil jakoukoli pomoc, musela jsem strávil přes 20 hodin tento týden četl o tomto problému a snaží se ladit. Nechtěl jsem najít nějaké dobré zdroje na to, jak správně ladit s chrome profiler.

Question 2

To není ve skutečnosti musí být odesílání nebo redukce. Za určitých okolností Reagovat začne překreslil synchronně, jako přímý výsledek dispatch - takže před console.log('after dispatching cellReceived', performance.now() - t); line

Takže to by také mohlo být velmi pomalý Reagovat render.

Pokud se chcete ujistit, že:

import { batch } from 'react-redux'

const someAction = (data): Thunk => async dispatch => {
  try {
    batch(() => {
        const t = performance.now();
        dispatch(someAction(data));
        console.log('after dispatching cellReceived', performance.now() - t); 
    })
  } catch {/*...*/}
}

phry · Answer 1 · 2021-11-14T19:29:04

To není ve skutečnosti musí být odesílání nebo redukce. Za určitých okolností Reagovat začne překreslil synchronně, jako přímý výsledek dispatch - takže před console.log('after dispatching cellReceived', performance.now() - t); line

Takže to by také mohlo být velmi pomalý Reagovat render.

Pokud se chcete ujistit, že:

import { batch } from 'react-redux'

const someAction = (data): Thunk => async dispatch => {
  try {
    batch(() => {
        const t = performance.now();
        dispatch(someAction(data));
        console.log('after dispatching cellReceived', performance.now() - t); 
    })
  } catch {/*...*/}
}

Vlastně si myslím, že to byl velmi pomalý re-render, byl jsem pomocí nivo - reagovat grafy knihovna - k tomu, aby o 30 grafy s data v reálném čase a ukázalo se, že to není nejlepší knihovnu pro tento případ použití koneckonců, nevěděl jsem, proč by to ukázat tento druh chyby, ale teď to dává smysl, vykreslování svgs pravděpodobně používá některé z metod, které způsobují nuceni layout/reflow. Každopádně jsem zjistila, že dávkování další aktualizace dohromady, je jednodušší na rozhraní, takže teď už jen dávky 10 aktualizace společně namísto aktualizace 10 krát za každé dočasné řešení, ale to funguje lépe.

Redux odeslání akce trvá příliš dlouho, i přes reduktor funkce připojené provádí rychle

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii