Re-render przez zmiane Redux state React

Question

Moje filtry znajdują się w state Redux'a. W jednym komponencie je zmieniam, w drugim zaś na ich podstawie wysyłam zapytanie do bazy danych w firebase.

 

// filtry
    const filters = useSelector(state => state.mapRedux.filters)

    const createFiltersTable = () => {
        const tmp = Object.values(filters)
        const values = []
        tmp.map(el => {
            if(el.active)
                values.push(el.events_name)
        })
        console.log(values)
        return values;
    }

    const getAllEvents = async (start) => {
        let myEventsArray = [];
        await firebase.firestore().collection('wydarzenie')
            .where('sport', 'in', createFiltersTable())
            .where('miasto', '==', currentCity)
            .orderBy("data_rozpoczecia")
            .startAfter(start)
            .limit(limit)
            .get().then(snapshot => {
                if (snapshot.size < limit) setShowMore(false)
                snapshot.forEach(doc => {
                    let info = doc.data()
                    let el = {
                        id: doc.id,
                        ...info
                    }
                    myEventsArray.push(el)
                });
            })
        let new_array = allEvents.concat(myEventsArray)
        setAllEvents(new_array);
    }

    useEffect(() => {
        getAllEvents(new Date());
    }, [])

 Po zmianie filtrów komponent wyżej się nie re-renderuje i dopóki nie wymuszę jakoś ponownego renderowania ( przłączenie między komponentami głównymi) moje filtry się nie uaktualnią. A chciałbym aby po zmianie jednego filtru ten komponent się cały re-renderował, aby filtry na bieżąco się aktualizowały.

Answer 1

Troche poprawiłem - tj. 

    useEffect(() => {
        setAllEvents([])
        getAllEvents(new Date());
    }, [filters])

 

I teraz jest fajnie, ponieważ komponent się re-renderuje. Jednak nie mam pojęcia czemu setAllEvent([]) nie czyści tablicy wydarzeń przez co funkcja getAllEvents(new Date()) dodaje (przefiltrowane) nowe wydarzenia do starej tablicy.

Comments

Wydaje się że bład może być w reducerze z stora. Masz jak pokazać cały kod?

---

Już rowiązałem problem. Dodałem hook'i useCallback createFilterTable i getAllEvents i dodałem w nich zależności między sobą, funkcję getAllEvents dodałem też do tej tablicy warunkowego wywołania w useEffect.