Keadaan Redux tidak boleh mengakses data backend (mySQL) dengan betul

Question

Saya menghadapi masalah memberikan data antara hujung belakang (mySQL) dan bahagian hadapan. Saya telah menyahpepijat dalam redux devtools dan log konsol tetapi masih tidak dapat mencari puncanya. Data semakin betul dalam log konsol, tetapi apabila saya log status saya ia hanya kosong. Dalam redux devtools saya dapat melihat data dalam tab tindakan dan status berubah daripada belum selesai kepada selesai. Walau bagaimanapun, apabila ia selesai, statusnya kosong.

Ini adalah keadaan awal komponen hirisan saya:

const initialState = {
  loading: false,
  error: "",
  supplierInfo: [
    {
      id: "",
      supplierName: "",
      supplierTin: "",
      supplierAddress: "",
      telNumber: "",
      celNumber: "",
      emailAddress: "",
    },
  ],
};

Ini adalah fungsi get saya (data dilog dengan betul):

export const fetchSuppliers = createAsyncThunk(
  "/supplier/fetchSuppliers",
  async () => {
    try {
      const response = await axios.get("http://localhost:3000/api/get");

      return response.data;
    } catch (error) {
      throw error;
    }
  }
);

Ini kod penghirisan saya:

export const SupplierSlice = createSlice({
  name: "supplier",
  initialState,
  reducers: {
    addSupplier: (state, action) => {
      state.supplierInfo.push(action.payload);
    },
    extraReducers: (builder) => {
      builder.addCase(fetchSuppliers.pending, (state) => {
        state.loading = true;
      });
      builder.addCase(fetchSuppliers.fulfilled, (state, action) => {
        state.loading = false;
        state.supplierInfo = action.payload;
        state.error = "";
      });
      builder.addCase(fetchSuppliers.rejected, (state, action) => {
        state.loading = false;
        state.supplierInfo = [];
        state.error = action.error.message;
      });
    },
  },
});
export default SupplierSlice.reducer;
export const { addSupplier } = SupplierSlice.actions;

Kod yang saya gunakan untuk mengedarkan data:

export const SuppliersTable = () => {
  const suppliers = useSelector((state) => state.supplier.supplierInfo);
  console.log(suppliers);
  const data = suppliers;
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchSuppliers());
  }, [dispatch]);

Consol.log di atas hanya kosong. Saya tidak tahu mengapa. Mungkin masalahnya adalah pada pengurang? Walaupun saya dapat melihat data dalam tab tindakan, ia tidak muncul dalam status.

Ini ialah tab tindakan dalam redux devtools:

Masukkan penerangan imej di sini

Inilah yang terdapat dalam tab status:

Masukkan penerangan imej di sini

Seperti yang anda lihat, tiada apa yang ditunjukkan dalam status. Saya tidak tahu mengapa. Ada sesiapa boleh tolong? Terima kasih!

Saya telah cuba menyahpepijat ini selama beberapa jam. Gunakan penyata log, redux devtools. Saya melihat data dari bahagian belakang tetapi ia tiada dalam status.

Answer 1

Keadaan Redux tidak menerima data kerana kod anda mempunyai sintaks yang salah.

Sila bandingkan kod sampel saya dengan kod sebenar anda.

const supplierSlice = createSlice({
  name: "supplier",
  initialState: initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchSuppliers.pending, (state, action) => {
      console.log(action);
      state.loading = true;
    });
    builder.addCase(fetchSuppliers.fulfilled, (state, action) => {
      state.supplierInfo = action.payload;
      state.loading = false;
    });
    builder.addCase(fetchSuppliers.rejected, (state, action) => {
      state.loading = false;
    });
  }
});

Ini adalah contohContoh