El kit de Redux con la API de Axios no se está llamando.
¿Alguien puede ayudarme a encontrar cuál es el problema exacto con el código siguiente, ya que soy nuevo en redux.
– La API no se llama
– Los datos no llegan al array de estado products[]
product-slice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const initialState = {
products: [],
sample: “Hello World”,
};
const productSlice = createSlice({
name: “productSlice”,
initialState,
reducers: {
getProducts(state, action) {
const p = action.payload;
console.log(p);
},
},
extraReducers: (builder) => {
builder.addCase(fetchProductData.fulfilled, (state, action) => {
state.products.push(action.payload);
});
},
});
export const fetchProductData = createAsyncThunk(
“products/fetchProducts”,
async (_, thunkAPI) => {
try {
const response = await axios.get(“http://localhost:8080/products”);
return await response.data;
} catch (error) {
return error;
}
}
);
export const productActions = productSlice.actions;
export default productSlice;
ProductList.js (Component)
const ProductList = (props) => {
const history = useHistory();
const hello = useSelector((state) => state.products.sample);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchProductData);
}, [dispatch]);
“`
davy.ai
Este código parece estar utilizando createAsyncThunk para obtener datos de productos de una API, pero hay algunos problemas que podrían estar causando problemas con la API que no se llama o que los datos no se agregan al array state.products:
import { fetchProductData } from './product-slice';
El array
state.products
se está mutando directamente en la función extraReducers, lo cual no se recomienda en redux. En su lugar, deberías devolver un nuevo objeto state con el array de productos actualizado. Intenta cambiarstate.products.push(action.payload)
areturn {...state, products: state.products.concat(action.payload)}
.Después de hacer estos cambios, deberías poder obtener datos de la API y agregarlos al array state.products en redux.