present : past[past.length - 1] , this should return a single value but it is returning a full array like slice method does

Question

import React, { useState, useRef, useReducer } from "react";
import "./App.css";

function reducer(state,action){ 
  const {past,present,future} = state
  switch(action.type){
    case 'ADD' : return {

      past : [...past,present],
      present : [...present,{id : Math.random(),name : action.payload}],
      future : [],
      canUndo : true,
      canRedo : false,
      
    }

    case "UNDO" : if(!state.canUndo) return state;
    return {
      present :past[past.length - 1], 
      past : past.slice(0,-1),
      future : [present,...future],
      canUndo : past.length > 1,
      canRede : true
    }
    case 'REDO' : return {
    
    }
    default: return state;
  }

}
function App(){
  const input = useRef();

  const initialState = {
    present : [],
    past : [],
    future : [],
    canUndo : false,
    canRedo : false,
  }

  const[items,dispatch] = useReducer(reducer,initialState);

  const addItem = (e) => {
    e.preventDefault();
    dispatch({type : 'ADD', payload : input.current.value})
    input.current.value = '';
 
  }
  return(
    <div>
      <h1>Shopping list</h1>
      <form className='add-product' onSubmit={addItem}>
        <label htmlFOR='product'>product</label>
        <input ref={input} type='text' id='product'/>
        <button type='submit'>Add</button>
      </form>

      <div className='actions'>
        <button onClick={() => dispatch({type : 'UNDO'})}>Undo</button>
        <button onClick={() => dispatch({type : 'REDO'})}>Redo</button>
      </div><ul>
        {items.present.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      
    </div>
  )
}



export default App;

Hello Everyone, i am having hard time understanding this concept

present : past[past.length - 1]

So after adding a value, This should return a single value when I click on Undo button, but it is returning a full array except the last one, if anyone explains this concept I will be very thankful, why it is behaving like slice method

Answer 1

If I'm understanding your post, you are asking why past[past.length - 1] returns an array instead of a single value.

The reason for this is because it IS returning a single value, the last element of the past array, and this value just happens to also be an array. In other words, your state, i.e. present is an array of values and you are maintaining "undo" and "redo" stacks. When a new item is added to the present array, the previous present array is added (PUSHED) to the past undo stack. When you undo this you are removing the last item (POPPED) from the past undo stack and replacing the current present array.

Example:

Initial state:

past: []
present: []
future: []

ADD 1: present is pushed into past ([].push([]) -> [[]]), 1 is pushed to present ([].push(1) -> [1])

past: [[]]
present: [1]
future: []

ADD 2: present is pushed into past ([[]].push([1]) -> [[], [1]]), 2 is pushed to present ([1].push(2) -> [1, 2])

past: [[], [1]]
present: [1, 2]
future: []

UNDO: present is pushed into future ([].push([1, 2]) -> [[1, 2]]), past is popped ([[], [1]].pop() -> [[]]) and set as present ([1])

past: [[]]
present: [1]
future: [[1, 2]]

ADD 3: present is pushed into past ([[]].push([1]) -> [[], [1]]), 3 is pushed to present ([1].push(3) -> [1, 3]), future is cleared ([])

past: [[], [1]]
present: [1, 3]
future: []

ADD 4: present is pushed into past ([[], [1]].push([1, 3]) -> [[], [1], [1, 3]]), 4 is pushed to present ([1, 3].push(4) -> [1, 3, 4])

past: [[], [1], [1, 3]]
present: [1, 3, 4]
future: []

Note that any element entry in past or future arrays (stacks) is an array.