L'état Redux ne peut pas accéder correctement aux données backend (mySQL)

Question

J'ai du mal à restituer les données entre le backend (mySQL) et le frontend. J'ai débogué dans les outils de développement Redux et les journaux de la console, mais je n'arrive toujours pas à trouver la cause. Les données s'affichent correctement dans le journal de la console, mais lorsque j'enregistre mon statut, elles sont simplement vides. Dans les outils de développement Redux, je peux voir les données dans l'onglet Actions et le statut passe de en attente à terminé. Cependant, une fois l'opération terminée, le statut est vide.

Voici l'état initial de mon composant slice :

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

Voici ma fonction get (les données sont correctement enregistrées) :

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

Voici mon code de découpage :

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;

Le code que j'utilise pour distribuer les données :

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

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

Le console.log ci-dessus est tout simplement vide. Je ne sais pas pourquoi. Peut-être que le problème vient des réducteurs ? Bien que je puisse voir les données dans l'onglet Action, elles n'apparaissent pas dans l'état.

Voici l'onglet action dans les outils de développement Redux :

Entrez la description de l'image ici

Voici ce qu'il y a dans l'onglet Statut :

Entrez la description de l'image ici

Comme vous pouvez le constater, rien n'est affiché dans le statut. Je ne sais pas pourquoi. Quelqu'un peut-il m'aider ? Merci!

J'essaie de déboguer cela depuis quelques heures. Utilisez des instructions de journal, des outils de développement Redux. Je vois les données du backend mais elles ne sont pas dans le statut.

Answer 1

L'état Redux ne reçoit pas de données car votre code a une syntaxe incorrecte.

Veuillez comparer mon exemple de code avec votre code réel.

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

Ceci est un exempleExemple