0

Hello am currently using redux toolkit in my project & i have encountered a problem when i was fetching data from back-end.The action type is success, the data is stored in the action's payload successfully and it keeps returning an empty array 'products', yet when i run it through postman and it returns data. I can't seem to figure the problem. Here is the code for the reducer

PostReducer.js

  export const listArticlesReducer = (
    state = { products:[], loading: false, error: false},
    { type, payload }
  ) => {
    switch (type) {
      case "RETREIVING_START":
        return {...state, loading: true};
      case "RETREIVING_SUCCESS":
        return {...state, products: payload, loading: false};
      case "RETREIVING_FAIL":
        return {...state, loading: false, error: payload };
      default:
        return state;
    }
  };

enter image description here enter image description here

Could you please tell me where is the problem ?

The data is fetched, assigned to the action's payload, I think the issue is in the PostReducer.js since the products state isn't changed

najlae01
  • 1
  • 2
  • Replace `return {...state, products: payload, loading: false};` to return `{...state, products: [{ codeArticle: 1, nomArticle: 2,.......}, loading: false};` and add some initial data here `state = { products:[{...}, {...},...],` Then check whether they are shown. – DraganS Nov 06 '22 at 23:52
  • Did as you told, yet the products array is still empty, the returned state is `{ products:[], loading: false, error: false}` even though the data is fetched in the payload – najlae01 Nov 07 '22 at 00:36
  • Ok, let's try like this - replace whole switch statement with return state; and set some initial data to state = { products:[.... add object to initial state ] }. After this you should see your data. Otherwise, you need to fix the view. The reducer you provided looks fine. – DraganS Nov 07 '22 at 00:48

0 Answers0