How to implement fifo queue with Reactjs&Redux

Question

Hello i need some help about react-redux because im still learning, lets say im trying to make simple Queue Management, and i have this reducer:

const initialState = {
    currentQueue = {},
    queues=[],
    loading: false
}

and the data would be like:

currentQueue: 
{{'id_queue': '1', 'queue_no': 'A001', 'status': 0}}

queues:
[0:{'id_queue': 1, 'queue_no': 'A001', 'status': 0 },
 1:{'id_queue': 2, 'queue_no': 'A002', 'status': 0 }]

How to get single object from queues array to currentQueue ? like next queue, i only know to get object by id (like people profile). so i need to render the queue array list one-by-one to show current queue number, or should i just manipulate the mysql query limit by 1 ?.

Please give enlighten me to implement proper queue in react-redux with mysql if there any better way, thank you. Because im already tried to search some queue implementation with react-redux but no luck.

Does this answer your question? [Correct modification of state arrays in ReactJS](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) — Emile Bergeron, Nov 13 '19 at 20:59
While the dupe target addresses a component's state's update, it is the same logic used with Redux' immutable state. — Emile Bergeron, Nov 13 '19 at 21:00
your title fifo (first in first out) implies removing an item from your queue. Do you want to simply access your redux state or remove (first out) the item? Is currentQueue a queue or an object the queue holds? — Mke Spa Guy, Nov 13 '19 at 21:27

Mke Spa Guy · Accepted Answer · 2019-11-13T23:22:08.683

javascript arrays can act like a fifo queue.

const fifo = [];
fifo.push(1)
fifo.push(2)
console.log(fifo.push(3)) // undefined
console.log(fifo) // [1, 2, 3]
const val = fifo.shift()
console.log(val, fifo) // 1, [2, 3]

However push, pop, unshift and shift all mutate the array. Here is an immutable way.

function immutablePush(arr, newEntry){
  return [ ...arr, newEntry ]      
}

function immutableShift(arr){
  return arr.slice(1)     
}

const fifo = [];
immutablePush(fifo, 1) // returns [1]
immutablePush(fifo, 2) // [1, 2]
immutablePush(fifo, 3) // [1, 2, 3] 
const val = fifo[0] // 1
immutalbeShift(fifo) // returns [2, 3]

If you want to lookup data like you do in a object, you will need to normalize data.

In most cases you can simply use findIndex

const findByIdQueue(array, id) => {
  const i = array.findIndex(item => item.id_queue === id);
  // if i = -1 (not found) return undefined else return found item
  return ~i ? undefined : array[i];
}

In react redux, we want to separate our access and update code. We access with selectors:

const selectFirstItem = state => {
  // access state.fifo but set fifo to [] if state or state.fifo are undefined
  const { fifo = [] } = state || {};
  // return first array item or undefined if there is an empty list
  return fifo[0]; 
}
const selectItemById = (state, ownProp) => {
  const { fifo = [] } = state || {};
  const { id } = ownProp || {};
  return findByIdQueue(fifo, id);
}
const mapStateToProps = (state, ownProp) => ({
  firstItem = selectFirstItem(state);
  itemById = select(state, ownProp)  // expect parent of MyCoolControl to pass in prop id
// <MyCoolControl id={24} />
})

export default connect(mapStateToProps)(MyCoolControl)

We update with actions:

const addItem = item => ({type: 'ADD_ITEM', item})
const removeFirstItem = () => ({type: 'REMOVE_FIRST_ITEM'})

const fifoReducer = (prev = defaultValue, action = {}) => {
  const { type, item} = action;
  switch (type) {
    case "ADD_ITEM":
      return [...prev, item];
    case "REMOVE_FIRST_ITEM":
      return prev.slice(1);
    default: {
      return prev;
    }
  }
};

This really help me to see how it work, thankyou very much sir ! — Hilarius Andriano, Nov 13 '19 at 23:16

score 0 · Answer 2 · answered Nov 13 '19 at 21:38

0

You can use push and shift methods of ordinary js array:

let x=[];
x.push(1);
x.push(2);
x.push(3);
x.push(4);
x.push(5);
console.log(x.shift());
console.log(x.shift());
console.log(x.shift());
console.log(x);
console.log(x.shift());
console.log(x.shift());

output:

answered Nov 13 '19 at 21:38

IgorK

148
8

this does not address Redux, https://stackoverflow.com/questions/34622414/fifo-behavior-for-array-pop-in-javascript – Mke Spa Guy Nov 13 '19 at 22:00

How to implement fifo queue with Reactjs&Redux

2 Answers2