Redux state cannot access backend (mySQL) data correctly

Question

I'm having trouble rendering data between the backend (mySQL) and the frontend. I've debugged in redux devtools and console logs but still can't find the cause. The data is getting correctly in the console log, but when I log my status it's just empty. In redux devtools I can see the data in the actions tab and the status changes from pending to completed. However, when it completes, the status is empty.

This is the initial state of my slice component:

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

This is my get function (data is logged correctly):

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;
    }
  }
);

This is my slicing code:

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;

The code I use to distribute the data:

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

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

The console.log above is just empty. I do not know why. Maybe the problem is in the reducers? Although I can see the data in the action tab, it is not showing up in the status.

This is the operations tab in redux devtools:

Enter image description here

This is what's in the Status tab:

Enter image description here

As you can see, nothing is shown in the status. I do not know why. Can anyone help? Thanks!

I've been trying to debug this for a few hours. Use log statements, redux devtools. I see the data from the backend but it's not in the status.

Answer 1

Redux state is not receiving data because your code has incorrect syntax.

Please compare my sample code with your actual code.

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;
    });
  }
});

This is an exampleExample