Question

我想从redux状态中删除一个元素。我使用seamless-immutable及其API来操作状态。但是当嵌套状态时，我找不到任何漂亮的方法来删除元素。

所以我要删除的元素是： state.shoppingcartReducer.products[articleNr]

谢谢！

import Immutable from 'seamless-immutable'

import { addToShoppingcart, createShoppingCart } from '../actions/shoppingcartActions'

const CREATE_SHOPPING_CART = 'CREATE_SHOPPING_CART'
const ADD_PRODUCT = 'ADD_PRODUCT'
const DELETE_PRODUCT = 'DELETE_PRODUCT'
const UPDATE_QUANTITY = 'UPDATE_QUANTITY'
const SUMMARY = 'SUMMARY'

const initialState = Immutable({
  summary: {
    sum: 0,
    quantity: 0
  }
})

export default function shoppingcartReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_PRODUCT:
      return state
        .setIn(['products', action.product.articleNr], addArticle(action))

    // case DELETE_PRODUCT:
    //   return ??

    case SUMMARY:
      return state
        .set('summary', calculateSums(action, state))

    case CREATE_SHOPPING_CART:
      return state
        .set(action.id, createCart(action))

    case UPDATE_QUANTITY:
      return state.
        set('summary', calculateQuantity(action, state))
  }
  return state
}

function addArticle(action) {
  return {
    product: action.product
  }
}

function calculateQuantity(action, state) {
  return {
    quantity: state.summary.quantity + action.quantity
  }
}

function calculateSums(action, state) {
  return {
      sum: state.summary.sum + action.price,
      quantity: state.summary.quantity + action.quantity
  }
}

function calculateSumsDelete(action, state) {
  return {
      sum: state.summary.sum - action.product.price,
      quantity: state.summary.quantity - action.product.quantity
  }
}

function createCart(action) {
  return {
    id: action.id,
  }
}

Answer 1

我在某个时候遇到了类似的情况。

因此，根据redux docs更新嵌套对象的方式是： -

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

但是既然你的状态中有数组就会让你的工作更加困难。

所以有两种方法可以做到这一点。

第一种方式（艰难的方式）

自己创建一个新对象并更新状态并返回新状态。现在关键是创建一个新的状态对象，而不是将当前状态分配给新对象，否则它将被改变。

所以，创建一个新对象。

const newState ={}

现在为您分配您不想更改为新状态的当前状态值。在您所说的状态中，您有3个密钥，key1，key2，您不希望此操作更改，shoppingCardReducer您想要更改。

newState['key1']=//key1 value from current state
newState['key2'] = //key2 value from current state

现在，请尝试以下操作： -

newState['shoppingCardReducer'] ={}
newState['shoppingCardReducer']['products']={}

现在阅读state.shoppingReducers.products并sttart循环你的products数组并将该特定元素替换为状态，保持其原封不动。

然后返回新状态（您应该保留其余属性，否则您的应用可能会中断）

如果你发现这显然是一个糟糕的方法，不是真正的黑客攻击，减速器对传播操作员做同样的事情，但肯定是一个糟糕的方式。所以我会说尝试下一个选项。

第二种方式（immutablejs）

我建议您使用immutable.js。它非常简单易用。

使用不可变，您可以使用deleteIn函数从您的州中删除您特定的特定产品元素。

data.deleteIn(["shoppingcartReducer",product,//your_to_deleted_element_index])

P.S：我没有尝试过上面的代码，但很少修改它应该工作。我希望你得到逻辑。

第三种方法（标准化）

您还可以尝试使用normalize API响应，以使您的数据保持平稳并获得访问权限。

但在上述三种中，我认为不可变是最好的选择。

Answer 2

您可以简单地使用delete方法：

删除this.props.register_reducer.selected_products ['yourid'];

从嵌套的redux状态中删除元素

2 个答案: