为什么 redux 中的状态会这样工作？

Question

这是我的 cartSlice.js 代码

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
    name: 'items',
    initialState: {
        items: []
    }, 
    
    reducers: {
        addItem(state, action) {
            console.log(state.items.filter(item => item.id === action.payload.id))
            console.log(state.items.filter(item => item.id === action.payload.id) != [])
            if (true) {
                let item = action.payload[0]
                let count = action.payload[1]
                state.items.push({...item, count})
        }
            else {
                console.log('asdas') //somelogic
            }

        },
        removeItem(state, action) {
            state.items = state.items.filter(item => item.id !== action.payload)
        }
        
    }
});

export const {addItem, removeItem} = cartSlice.actions;
export default cartSlice.reducer;

这就是我采取行动的地方

import {React} from 'react'
import { addItem } from '/store/cartSlice'
import { useDispatch } from 'react-redux'
import { useState} from 'react'

export default function ProductPage() {
  let { state } = useLocation()
  let item = state.item
  const [count, setCount ]= useState(1)
  const dispatch = useDispatch()
  const addTask = () => dispatch(addItem([item, count]))
  return (
    <>
      <div className={classes.info}>
        <h2 >{item.title}</h2>
        <span className={classes.price}>{item.price}</span>
        <div className={classes.quantity}>
          <button onClick={() => setCount(count-1)}
          className={classes.quantityButton}>-</button>
          {count}
          <button onClick={() => setCount(count+1)}
          className={classes.quantityButton}>+</button>
        </div> 
        <button className={classes.addToCartButton} 
        onClick={addTask}>Add to cart</button>
      </div>
    </>
  )
}

这里是控制台在此处输入图像描述 item 是一个带有标题、id 等键的对象 伙计们，为什么第二次登录 addItem 返回 true 第一个日志在控制台中返回一个空数组

我才开始使用 redux，不明白如何使用状态

所以我想检查操作中的项目是否实际上处于状态。items 但它不起作用

Answer 1

为什么addItem中的第二个日志返回true，第一个日志在控制台中返回一个空数组

• 第一个日志的空数组是

  state.items.filter(item => item.id === action.payload.id

  的结果。

  action.payload

  是一个数组，因此

  id

  属性未定义。结果数组为空，因为所有

  item.id

  值均已定义且不等于

  undefined

  。

• 第二条日志输出

  true

  ，因为您正在比较两个对象引用，一个数组/对象引用不等于另一个不同数组/对象引用。

考虑以下因素：

const foo = [];
const bar = foo;

console.log("[] == []", [] == []);     // false
console.log("[] != []", [] != []);     // true
console.log("foo == bar", foo == bar); // true
console.log("foo != bar", foo != bar); // false

我想检查操作中的项目是否确实在

state.items

但它不起作用

更新reducer逻辑以正确引用传递的

item

有效负载值。

示例：

• 使用当前数组有效负载

  dispatch(addItem([item, count]))
  

  const [item, count] = action.payload;
  
  state.items.filter(el => el.id === item.id);
  

• 使用对象有效负载

  dispatch(addItem({ item, count }))
  

  const { item, count } = action.payload;
  
  state.items.filter(el => el.id === item.id);
  

如果您尝试首先检查

state.items

是否已包含该项目，您可以搜索数组。

示例：

addItem(state, action) {
  const [item, count] = action.payload;

  const foundItem = state.items.find(el => el.id === item.id);

  if (foundItem) {
    // item found, update it
    ...

  } else {
    // item not found, add to state.items
    // maybe -> state.items.push({ ...item, count }) 🤷🏻‍♂️
    ...

  }
},