API'dan veri çekiyorum ancak ilk başta veri boş geliyor daha sonra veri geliyor
React redux kullanarak api'dan veri çekiyorum ancak ilk başta veri boş geliyor daha sonra veri geliyor nasıl düzeltebilirim ?
https://www.hizliresim.com/aatjqna
//DonemSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const initialState = {
donem: [],
};
export const getDonem = createAsyncThunk("getDonem", async () => {
const { data } = await axios.get("https://localhost:44381/api/Donems/getall");
return data;
});
export const donemSlice = createSlice({
name: "donem",
initialState,
reducers: {},
extraReducers: (builder) => {
builder.addCase(getDonem.fulfilled, (state, action) => {
state.donem = action.payload;
});
},
});
export default donemSlice.reducer;
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";
const Donem = () => {
const dispatch = useDispatch();
const { donem } = useSelector((state) => state.donem);
useEffect(() => {
dispatch(getDonem());
}, []);
console.log(donem);
return (
<div className="input">
</div>
);
};
export default Donem;
Bu bir hata değildir. Hatta olması gereken bir durum :)
Donem component'i dom'a yerleştiğinde state'ini güncelliyorsun.
State'in getDonem'i çağırmadan önce donem değişkeni verdiğin ilk initialState değerine sahip olur. Api'den cevap dönüp state'ini güncellediği zaman App'i render edip değişkenin değerini günceller
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";
const Donem = () => {
const dispatch = useDispatch();
const { donem } = useSelector((state) => state.donem);
useEffect(() => {
dispatch(getDonem());
}, []);
console.log(donem);
return (
<div className="input">
{donem.length > 0 ? (<div>Data var</div>) : (<div>Yükleniyor..</div>)}
</div>
);
};
export default Donem;