我想从我的redux状态中删除一个元素。我使用无缝不可变及其API对状态进行操作。但是我找不到在嵌套状态时删除元素的任何好方法。
所以我要删除的元素是: state.shoppingcartReducer.products[articleNr]
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, } }
有时我也陷入了类似情况。
因此,根据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要改变。
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并循环遍历产品数组,并从状态中替换该特定元素,保持完好无损。
state.shoppingReducers.products
然后返回新状态(您应保留其余属性不变,否则应用可能会中断)
如果您发现这显然是一种不好的方法,而不是真正的hack,那么reducer与传播运算符会做同样的事情,但肯定是一种不好的方法,所以我会说尝试下一个选项。
第二种方式(immutablejs)
我建议您使用immutable.js。它真的很容易使用。
使用不可变,您可以使用deleteIn函数从状态中删除特定的特定产品元素。
deleteIn
data.deleteIn(["shoppingcartReducer",product,//your_to_deleted_element_index])
PS:我还没有尝试上面的代码,但稍加修改就可以了。希望您能理解。
第三种方法(Normalizr)
您也可以尝试使用make 标准化您的API响应,以使数据平坦并可以访问。
但是在以上三个中,我认为不变是最好的选择。