如何在Reactjs和Redux中实现FIFO队列

Question

您好，我需要关于react-redux的帮助，因为我还在学习，假设我正在尝试制作简单的队列管理，并且我有这个reducer:

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

如何从“queues”数组中获取单个对象到“currentQueue”？例如下一个队列，我只知道通过ID获取对象（例如人物资料）。因此，我需要逐个渲染队列数组列表以显示当前队列编号，或者我应该仅通过将MySQL查询限制为1来操作？

请给我启示，如何在React-Redux中使用MySQL实现适当的队列，如果有更好的方法，请告诉我，谢谢。因为我已经尝试搜索一些React-Redux中的队列实现，但没有找到合适的。

- Hilarius Andriano

---

这个回答解决了你的问题吗？在ReactJS中正确修改状态数组 - Emile Bergeron

当 dupe target 地址与组件状态更新相关时，它所使用的逻辑与 Redux 中不可变状态相同。 - Emile Bergeron

你的标题FIFO（先进先出）意味着从队列中删除一个项目。你是想简单地访问你的Redux状态还是删除（先出）该项？currentQueue是一个队列还是队列所持有的对象？ - Mke Spa Guy

Answer 1

JavaScript数组可以像FIFO队列一样运作。

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]

然而，push、pop、unshift和shift都会改变数组。这里有一种不可变的方法。

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]

如果您想像在对象中一样查找数据，您将需要规范化数据。

在大多数情况下，您可以简单地使用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];
}

在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)

我们会根据行动进行更新：

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

- Mke Spa Guy

---

这真的帮助我了解它是如何工作的，非常感谢您先生！ - Hilarius Andriano

Answer 2

您可以使用普通JS数组的push和shift方法：

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

- IgorK

---

这不涉及Redux，https://dev59.com/7lsW5IYBdhLWcg3wwZYP - Mke Spa Guy