How to handle multiple Requests with Redux (React Native) - without overwrite itself?

Question

i have a default config, found through net search, and implement this in my App and it works. On my Homescreen the data is loaded and can be used. After this i need a second action which loads other data for another screen. But now is only one action available. First the data on homescreen is available and second screen get the same data, or second screen get the correct data and by switching back to homescreen there is the data from the second screen available. The Example from HomeScreen looks like:

action/index.js

export function fetchArticleDetails() {
  return apiAction({
    url: "requesturl",
    onSuccess: setArticleDetails,
    onFailure: () => console.log("Error occured loading articles"),
    label: FETCH_ARTICLE_DETAILS
  });
}

function setArticleDetails(data) {
  return {
    type: SET_ARTICLE_DETAILS,
    payload: data
  };
}

the reducer looks as follows

export default function(state = {}, action) {
  console.log("action type => ", action.type);
  switch (action.type) {
    case SET_ARTICLE_DETAILS:
      return { data: action.payload };
    case API_START:
      if (action.payload === FETCH_ARTICLE_DETAILS) {
        return {
          ...state,
          isLoadingData: true
        };
      }
    case API_END:
      if (action.payload === FETCH_ARTICLE_DETAILS) {
        return {
          ...state,
          isLoadingData: false
        };
      }
   ...

i thought, i can add a custom action with the same params as above now action/index.js added following

export function fetchPeopleList() {
  return apiAction({
    url: "http://wfmanager.de/appApi/2.0.0/getPeopleList/1",
    onSuccess: setPeopleList,
    onFailure: () => console.log("Error occured loading articles"),
    label: FETCH_PEOPLELIST
  });
}

function setPeopleList(data) {
  return {
    type: SET_PEOPLELIST,
    payload: data
  };
}

and reducer added following:

case SET_PEOPLELIST:
    return { data: action.payload };

case API_START:
    ....
    if (action.payload === FETCH_PEOPLELIST) {
      return {
        ...state,
        isLoadingData: true
      };
    }
    ....
case API_END:
    if (action.payload === FETCH_ARTICLE_DETAILS) {
      return {
        ...state,
        isLoadingData: false
      };
    }
    if (action.payload === FETCH_PEOPLELIST) {
      return {
        ...state,
        isLoadingData: true
      };
    }

Can anyone help to explain why redux overwrite the data? Many Thx.

Edit: changed reducer as suggested, but the same problem.

case SET_ARTICLE_DETAILS:
    return { ...state, data: action.payload };
case SET_PEOPLELIST:
    return { ...state, data: action.payload };
case API_START:
    if (action.payload === FETCH_ARTICLE_DETAILS || action.payload === FETCH_PEOPLELIST) {
      return {
        ...state,
       
      };

sakshya73 · Accepted Answer · 2021-02-26 13:59:59Z

1

You should have two different variables to store data...in both the cases you are updating the same data variable in your reducer that's why the data is being overwritten.

case SET_ARTICLE_DETAILS:
    return { ...state, articlesData: action.payload };
case SET_PEOPLELIST:
    return { ...state, peoplesData: action.payload };

answered Feb 26, 2021 at 13:59

sakshya73

7,4616 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Richter Over a year ago

Thats the correct answer. Tried and worked. Thx so much.

Linda Paiste · Accepted Answer · 2021-02-26 02:01:08Z

0

A reducer must always return a complete state. It looks like you reducer has properties data and isLoadingData.

This case is good. We copy all of the existing state and then overwrite isLoadingData with a new value.

return {
  ...state,
  isLoadingData: true
};

This case is bad. We return a state which only has the property data. Every other property in the state gets erased.

return {
  data: action.payload
};

You always want to include ...state.

return {
  ...state,
  data: action.payload
};

answered Feb 26, 2021 at 2:01

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

1 Comment

Daniel Richter Over a year ago

i edited the code (see in my question) but its the same problem. Do i misunderstand something?

Collectives™ on Stack Overflow

How to handle multiple Requests with Redux (React Native) - without overwrite itself?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related