Javascript 如何用Reactjs实现fifo队列&；重演

您好，我需要一些关于react redux的帮助，因为我还在学习，假设我正在尝试进行简单的队列管理，我有一个减速机：

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

数据如下：

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 }]

如何从队列数组到当前队列获取单个对象？和下一个队列一样，我只知道按id获取对象（如人员配置文件）。因此，我需要一个接一个地呈现队列数组列表，以显示当前的队列号，或者我应该将mysql查询限制操纵1

---

如果有更好的方法，请告诉我如何使用mysql在react redux中实现正确的队列，谢谢。因为im已经尝试使用react redux搜索一些队列实现，但没有成功。

您可以使用普通js数组的推送和移位方法：

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());

输出：

1
2
3
[4,5]
4
5

---

javascript数组可以像一个数组一样工作

但是推送、弹出、取消移位和移位都会对数组进行变异。这是一个例子

如果希望像在对象中一样查找数据，则需要

在大多数情况下，您可以简单地使用

在react redux中，我们希望将访问和更新代码分开。我们使用选择器访问：

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)

---

这回答了你的问题吗？虽然dupe目标处理组件状态的更新，但它与Redux的不可变状态使用的逻辑相同。标题fifo（先进先出）意味着从队列中删除项目。您只是想访问redux状态还是删除（先出）该项？currentQueue是队列还是队列中的对象？这不是Redux的地址，这确实帮助我了解它是如何工作的，非常感谢先生！

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]

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];
}

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)

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;
    }
  }
};