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 — Emile Bergeron
– Emile Bergeron, Commented Nov 13, 2019 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
– Emile Bergeron, Commented Nov 13, 2019 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
– Mke Spa Guy, Commented Nov 13, 2019 at 21:27

Mke Spa Guy · Accepted Answer · 2019-11-13 23:22:08Z

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 !

IgorK · Accepted Answer · 2019-11-13 21:38:10Z

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, 2019 at 21:38

IgorK

1441 silver badge8 bronze badges

1 Comment

Mke Spa Guy Over a year ago

this does not address Redux, stackoverflow.com/questions/34622414/…

Collectives™ on Stack Overflow

How to implement fifo queue with Reactjs&Redux

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related