how to manage complex redux state for different async calls

Question

With the help of programming can you explain me how to manage complex redux state for different async calls?

Answer 1

To manage complex Redux state for different async calls:

Structure State Clearly:

const initialState = {

  users: { data: [], loading: false, error: null },

  posts: { data: [], loading: false, error: null },

  comments: { data: [], loading: false, error: null },

};


Handle Each Async Call Separately in Reducer:

switch (action.type) {

  case 'FETCH_USERS_REQUEST':

    return { ...state, users: { ...state.users, loading: true } };

  case 'FETCH_USERS_SUCCESS':

    return { ...state, users: { data: action.payload, loading: false, error: null } };

  case 'FETCH_USERS_FAILURE':

    return { ...state, users: { ...state.users, loading: false, error: action.payload } };

  // Repeat similarly for posts and comments

}

Use Middleware (Thunk/Saga) to manage async logic cleanly.