Incrementing Click Redux Function in an array

Question

I am working with some svg elements and i have built an increment button.

The increment button takes the the path d values converts it into an array and sums 5 from the third element of the array. If the element is 'L' or 'M' it does nothing

Here the click function in the redux, it takes the values of the incrementing action state

  const a = action.index;
  let string = state[a].d;

It converts in an array

let array = string.split(" ");

and then it does all the calculation i said in the loop

See the full redux function

  switch(action.type) {
    case 'INCREMENT_COORDINATES' :
      console.log("incrementing coordinaates")
      const a = action.index;
      let string = state[a].d;
      let array = string.split(" ");
      let max = array.length;
      let i = 3;
      let click = () => {
        i++;
        if ( i === max ) i = 3;
        if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
        array.join(' ');
      };
      return [
        ...state.slice(0,a), // before the one we are updating
        {...state[a], d: click()}, // updating the with the click function
        ...state.slice(a + 1), // after the one we are updating
      ]
    default:
      return state;
  }

See the video demo while i debug it http://www.fastswf.com/uSBU68E

As you can see the code does the right calculation and it sums 5 from the fourth element and it is returning the number 331. So all good!But the problem is that i need to return it as '331', a new element of the array to continue the loop.

I have built a demo which is perfectly working and doing what i want to achieve, using the same code! So i don't understand what i am doing wrong when i apply it in my redux function.

See the jsBin perfectly working as i want.

Answer 1

EDITED:

1. Your click function doesn't return any value, so array.join(' ') result isn't assigned anywhere and property d remains unassigned.
   

   let click = () => {
     i++;
     if ( i === max ) i = 3;
     if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
     return array.join(' '); 
   };
   

2. Each time increment_coordinates action is invoked, whole code in block after case 'INCREMENT_COORDINATES' : is executed. In this case important is that variable i is in each call a new variable, initialized with 3. During execution of click function, i increases to 4 and then it goes out of it's scope so its value is lost.
   
   My suggestion is to include current index in state (hope this would work & I've removed click function as it's each call re-created and only once invoked)
   
   Remember to include index also in line where you pass your coordinates for the first time to your reducer or check whether state[a] contains property index and set i=3 if not.

   switch(action.type) {
   case 'INCREMENT_COORDINATES' :
     console.log("incrementing coordinaates")
     const a = action.index;
     let string = state[a].d;
     let array = string.split(" ");
     let max = array.length;
     let i = (state[a].index || 3) + 1;
     if ( i === max ) i = 3;
     if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
     return [
       ...state.slice(0,a), // before the one we are updating
       {...state[a], d: array.join(' '); index: i}, // updating 
       ...state.slice(a + 1), // after the one we are updating
     ]
   default:
     return state;
   }