v2.5.2
Giriş yap

API'dan veri çekiyorum ancak ilk başta veri boş geliyor daha sonra veri geliyor

mlhslckr
313 defa görüntülendi

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;
devepdogukan
634 gün önce

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;