Как добавить запись в 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