Как добавить запись в Redux store?

Есть компонент Home, в котором useEffect получает данные с mongo и записывает их в store. Компонент Home является главной страницей приложения. На главной страние есть кнопка "+" для добавления записи в базу данных. После нажатия на "+" открывается компонент с формой и кнопкой которая добавляет запись в БД. После нажатия на кнопку записть добавляется в бд и в redux store и приложение возвращается к компоненту Home, это реализовано с помощью useNavigate(-1). Проблема заключается в том что при первом добавлении записи в бд приложание работает не правильно, а если в бд уже есть 1 или более записей то все рабоатет корректно. Проблема в том, что после первого добавления данных в бд они не отображаются сразу в компоненте home, и их нету в redux store, пока не перегрузить страницу, после перегрузки страницы все работает корректно.

Компонент Home:

const Home = () => {

    const dispatch = useDispatch()
    const isAuth = useSelector(selectIsAuth)
    const outgoings = useSelector((state) => state.car.outgoings.items)
    const [sidebar, setSidebar] = useState('')
    const [isCarListActive, setCarListActive] = useState('')

    const [price, setPrice] = useState(0)

    const currentCar = useSelector(state => state.car.currentCar)
    useEffect(() => {
        if (isAuth) {
            dispatch(fetchCars())
        }
    }, [])

    useEffect(() => {
        dispatch(fetchOutgoingsFromCar(currentCar?._id))
    }, [currentCar])

    useEffect(() => {
        setPrice(countOutgoings(outgoings))
    }, [outgoings])

    const [keys, values] = createOutgoingsArrays(outgoings)


    return (//разметка)
}
export default Home

Страница с формой добавления записи в БД:

const AddCar = () => {

    const navigate = useNavigate()
    const dispatch = useDispatch()

    const goBack = () => {
        navigate(-1)
    }

    const {
        register, handleSubmit, setError, formState: {
            errors, isValid
        }
    } = useForm({
        defaultValues: {
            brand: '',
            model: '',
            year: '',
            fuelType: '',
            engineSize: '',
            description: '',
        },
        mode: 'onChange'
    })

    const cars = useSelector((state) => state.car.cars.items)
    const onSubmit = async (values) => {
        const fields = {
            ...values,
            brand: capitalize(values.brand),
            model: capitalize(values.model),
            year: Number(values.year),
            engineSize: Number(values.engineSize),
            description: values.description ? values.description : ""
        }
        console.log(fields)
        const car = await axios.post('/car', fields)
        goBack()
    }

    return (
        // Разметка
    );
};

export default AddCar;

Redux:

export const fetchCars = createAsyncThunk('/car/fetchCars', async () => {
    const {data} = await axios.get('/car')
    return data
})

export const fetchOutgoings = createAsyncThunk('/car/outgoings', async () => {
    const {data} = await axios.get('/outgoing')
    return data
})

export const fetchOutgoingsFromCar = createAsyncThunk('car/carid/', async (carId) => {
    const {data} = await axios.get(`outgoing/carid/${carId}`)
    return data
})

const initialState = {
    cars: {
        items: [],
        status: 'loading'
    },
    outgoings: {
        items: [],
        status: 'loading'
    },
    currentCar: {}
}

const carSlice = createSlice({
    name: 'cars',
    initialState,
    reducers: {
        changeCurrentCar(state, action) {
            state.currentCar = action.payload
        },
        logoutCar(state, action) {
            state.currentCar = {}
            state.cars.items = []
            state.outgoings.items = []
        },
        removeCar(state, action) {
            state.cars.items = state.cars.items.filter(item => item._id !== action.payload)
            if (state.currentCar._id === action.payload) {
                state.currentCar = state.cars.items[0]
            }
        },
        addCar(state, action) {
            state.cars.items.push(action.payload)
        }
    },
    extraReducers: {
        //get cars
        [fetchCars.pending]: (state) => {
            state.cars.items = []
            state.cars.status = 'loading'
        },
        [fetchCars.fulfilled]: (state, action) => {
            state.cars.items = action.payload.cars
            if (!state.currentCar._id) {
                state.currentCar = action.payload.cars[0]
            }
            //state.currentCar = action.payload.cars[0]
            state.cars.status = 'loaded'
        },
        [fetchCars.rejected]: (state) => {
            state.cars.items = []
            state.cars.status = 'error'
        },

        //get outgoings
        [fetchOutgoings.pending]: (state) => {
            state.outgoings.items = []
            state.outgoings.status = 'loading'
        },
        [fetchOutgoings.fulfilled]: (state, action) => {
            state.outgoings.items = action.payload.outgoings
            state.outgoings.status = 'loaded'
        },
        [fetchOutgoings.rejected]: (state) => {
            state.outgoings.items = []
            state.outgoings.status = 'error'
        },

        //fetchOutgoingsFromCar
        [fetchOutgoingsFromCar.pending]: (state) => {
            state.outgoings.items = []
            state.outgoings.status = 'loading'
        },
        [fetchOutgoingsFromCar.fulfilled]: (state, action) => {
            state.outgoings.items = action.payload.outgoings
            state.outgoings.status = 'loaded'
        },
        [fetchOutgoingsFromCar.rejected]: (state) => {
            state.outgoings.items = []
            state.outgoings.status = 'error'
        },
    }
})

export const carReducer = carSlice.reducer
export const {changeCurrentCar} = carSlice.actions
export const {logoutCar, removeCar, addCar} = carSlice.actions

Ответы (0 шт):