Reducer keep returning an empty array

Question

I'm trying to return an array from the reducer after filling it with data, but it always returns an empty array.

export default function dashboards(state: any = dashboardsState, action: any) {
 // more code
  if (action.type === Types.LOAD_DASHBOARD_SUCCESS) {
    // create the cards holder in the store
    var cardsSkull: any = [];
    Object.keys(action.payload.lists).map((idLis: any) => {
      cardsSkull[idLis] = {};
      console.log("still up");
    });
    action.payload.importedDashboards.map((impDash: any) => {
      Object.keys(impDash.mappedLists).map((key: any) => {
        const mpList = impDash.mappedLists[key];
        cardsSkull[mpList.idlistLocal][impDash.remote_board_id] = [1, 2, 3];
        console.log("still working");
      });
    });
    console.log(cardsSkull);
    // assign and ready to go
    return Object.assign({}, state, {
      selectedDashboardData: action.payload,
      cards: cardsSkull
    });
  }
// more code
return state;
}

when I console.log(cardsSkull) everything looks right.

I expect the cards to have the value of cardsSkull after it is filled, but the actual output is an empty array

client code ? just for information selectedDashboardData returned with value , only cards empty — Amir Saadallah
– Amir Saadallah, Commented Apr 20, 2019 at 9:06
Try doing console.log(JSON.stringify(cardsSkull)) and report what you get. Console.log kind of observe changes in arrays... — julianobrasil
– julianobrasil, Commented Apr 20, 2019 at 9:29

Peter Lehnhardt · Accepted Answer · 2019-04-20 10:15:10Z

2

You define cardsSkull as array (which is an object under the hood), but because idLis is not a number, cardsSkull[idLis] = {}; does not populate an element within the array part of the object, but rather an element within the array object itself. Therefore in your screenshot, the length property of your array is still 0! Use numbers for idLis and your problem is solved.

answered Apr 20, 2019 at 10:15

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

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

Comments

duc mai · Accepted Answer · 2019-04-20 10:11:51Z

1

it seems that you are assuming wrong type for cards, it is an object instead of array. I would suggest to update as following

export default function dashboards(state: any = dashboardsState, action: any) {
  // more code
  if (action.type === Types.LOAD_DASHBOARD_SUCCESS) {
    // create the cards holder in the store
    const cardsSkull = Object.keys(action.payload.lists).reduce(
      (acc, idLis) => ({ ...acc, [idList]: {} }),
      {}
    );    

    action.payload.importedDashboards.forEach((impDash: any) => {
      Object.keys(impDash.mappedLists).forEach((key: any) => {
        const mpList = impDash.mappedLists[key];
        cardsSkull[mpList.idlistLocal][impDash.remote_board_id] = [1, 2, 3];
        console.log('still working');
      });
    });
    console.log(cardsSkull);
    // assign and ready to go
    return {
      ...state,
      selectedDashboardData: action.payload,
      cards: cardsSkull
    }
  }
  // more code
  return state;
}

answered Apr 20, 2019 at 10:11

duc mai

1,4222 gold badges11 silver badges17 bronze badges

1 Comment

Amir Saadallah Over a year ago

it's working, thanks, man. tried a bunch of stuff without success and i forget to check my types again.

Collectives™ on Stack Overflow

Reducer keep returning an empty array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related