Redux react not setting the value after action/reducer call

Question

In my action, I am getting a JSON response from the server after that which I set the SET_CURRENT_STORAGE in reducer. In my second dispatch, I am processing the result from the first action and trying to set the payload using a custom function called getStorageCapacity().

Below is my code for action

export function fetchStorage() {
  return function(dispatch) {
    return fetch('/api/dashboard/storage', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include'
    })
      .then(response => response.json().then(body => ({ response, body })))
      .then(({ response, body }) => {
        //calculate storage
        if (!response.ok) {
        } else {
          var test1 = body.value;
          var take1 = Promise.resolve(
            dispatch({
              type: 'SET_CURRENT_STORAGE',
              payload: body.value
            })
          );
          take1.then(function() {
            dispatch({
              type: 'SET_CURRENT_STORAGE_CAPACITY',
              payload: getStorageCapacity(test1)
            });
          });
        }
      });
  };
}

export function getStorageLevel(payload) {
  return 'High';
}

export function getStorageCapacity(test1) {
  console.log('reached ' + test1);
  var arr = [];
  for (var key in test1) {
    console.log(test1[key]);
  }
  test1.forEach((item, i) => {
    console.log(item.capacity);
    return item.capacity;
  });
}

export function getStorageAvailable(payload) {
  return '150';
}

export function getStorageUsed(payload) {
  return '10';
}

Below is my code for reducer

import {
  SET_CURRENT_STORAGE,
  SET_CURRENT_APPLICATION_SERVICES,
  SET_CURRENT_STORAGE_LEVEL,
  SET_CURRENT_STORAGE_CAPACITY,
  SET_CURRENT_STORAGE_AVAILABLE,
  SET_CURRENT_STORAGE_USED
} from '../actions/typesActions';
import isEmpty from '../validation/is-empty';
const initialState = {
  storageValue: [],
  storageLevel: 'Low',
  storageCapacity: '60',
  storageAvailable: '50',
  storageUsed: '10',
  appSerStatus: []
};

export default function(state = initialState, action) {
  console.log(state);

  switch (action.type) {
    case SET_CURRENT_STORAGE:
      return {
        ...state,
        storageValue: action.payload
      };
    case SET_CURRENT_APPLICATION_SERVICES:
      return {
        ...state,
        appSerStatus: action.payload
      };
    case SET_CURRENT_STORAGE_LEVEL:
      return {
        ...state,
        storageLevel: action.payload
      };
    case SET_CURRENT_STORAGE_CAPACITY:
      console.log(action);
      return {
        ...state,
        storageCapacity: action.payload
      };
    case SET_CURRENT_STORAGE_AVAILABLE:
      return {
        ...state,
        storageAvailable: action.payload
      };

    case SET_CURRENT_STORAGE_USED:
      return {
        ...state,
        storageUsed: action.payload
      };
    default:
      return state;
  }
}

Whenever I process using the foreach it is returned as undefined but when I hard code the return value in the getStorageCapacity() the value is returned as expected.

Any idea what could be the reason?**

Is your for loop returns valid value I mean the one before forEach? — Hemadri Dasari, Oct 13 '18 at 06:07

score 0 · Answer 1 · answered Oct 13 '18 at 08:05

0

Returning from forEach doesn't return out of the function getStorageCapacity, it returns out of the loop.

Perhaps you want to try something like this:

export function getStorageCapacity(test1) {
  console.log('reached ' + test1);
  var arr = [];
  for (var key in test1) {
    console.log(test1[key]);
  }
  arr = test1.map((item, i) => {
    console.log(item.capacity);
    return item.capacity;
  });
  return arr;
}

answered Oct 13 '18 at 08:05

Stefan Generalao

111
3

Thanks for the pointer, will verify when at work and mark your answer as accepted. Thanks again – user3509208 Oct 14 '18 at 16:36

score 0 · Answer 2 · answered Oct 13 '18 at 12:15

0

return value from forEach is undefined

the .forEach() function is supposed to continue the loop - it ignores the return value from your function.

answered Oct 13 '18 at 12:15

sMojtaba Mar

359
2
5
15

Redux react not setting the value after action/reducer call

2 Answers2