Witam, mam problem z aplikacją, którą tworzę. Mam stworzoną akcję, która dispachuje dane zwrócone przez requesta GET i dane są umieszczane w storze.

Kopiuj
export function fetchAllRoadDetails() {
    return function(dispatch) {
        return axios.get("/api/connection/allTrips")
            .then(payload => {
                dispatch(setAllRoad(payload));
            })
            .catch(err => {
                console.log(err)
            });
    };
}

function setAllRoad(data) {
    return {
        type: SET_ALL_ROAD,
        payload: data,
    };
}

const initialState = {
    allRoad:[],
}

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_ALL_ROAD:
            return {
                ...state,
                allRoad: action.payload };
        default:
            return state;
    }

};
}

Następnie mam komponent funkcyjny, w którym pod button'em w OnClick wywołuje funkcję:

Kopiuj
    const setTrip = () => {
        axios.post('/api/connection/add',
            {
                "roadDate": state.date_c,
                "vehicle": state.vehicle_c,
                "driver": state.driver_c,
            })
            .then(()=>console.log("success"))
            .catch((err)=>console.log(err));
              props.fetchAllRoadDetails();
    }

const mapDispatchToProps=dispatch=>({
    fetchAllRoadDetails:()=>dispatch(fetchAllRoadDetails())

});

Mój problem polega na tym, że po wywołaniu posta w setTrip() oraz geta w fetchAllRoadDetails(), state działa z opóźnieniem, dopiero nastepne wywołanie pokazuje wynik wcześniejszego wywowłania.

Załóżmy tablica allRoad:[], jest pusta, wywołuje setTrip() oraz fetchAllRoadDetails() i redux devtools pokazują mi, że tablica nadal jest pusta a SET_ALL_ROAD zostało odczytane.
Dopiero następne wywołanie, czyli drugie, pokazuje mi, że w tablicy jest jeden element.

Czemu tak się dzieje ?

Z góry dziękuje za pomoc.