ネストされた還元状態から要素を削除します

Question

還元状態から要素を削除します。イムはシームレスで不変で、その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 
       } 
      } 
     } 
    } 
} 

しかし、あなたはあなたの状態で配列を持っているので、それはあなたが少し難しい作業になります。

このように2つの方法があります。

まず道（難しい方法）

は、自分で新しいオブジェクトを作成し、状態を更新し、新しい状態を返します。ここでは、新しい状態オブジェクトを作成し、現在の状態を新しいオブジェクトに割り当てないためのキーです。それ以外の場合は、それは変更されます。

したがって、新しいオブジェクトを作成します。

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を読んで、そのまま残り続ける、状態からその特定の要素を交換してください。その後

あなたは、これは本当に、はっきりハックそれを行うには悪い方法ではありません表示された場合、減速はして同じことを行う新しい状態（あなたはあなたのアプリケーションを破ることができる他に無傷で残りのプロパティを維持する必要があります）

を返します私は次のオプションを試してみようと思います。私はあなたをお勧めし

第二の方法（immutablejs）

はimmutable.jsを使用します。その本当に簡単で使いやすい。

不変の場合、deleteIn関数を使用して、特定の特定の製品要素を状態から削除することができます。

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

P.S：私は上記のコードを試してみましたが、少し変更するだけでうまくいくはずです。私はあなたが論理を得ることを願っています。

第3の方法（Normalizr）

あなたはまた、アクセスするデータが平坦でアクセスするためにnormalizeあなたのAPIレスポンスに作る試すことができます。

しかし、上記3つの中で私は不変の気持ちが最高の選択肢だと感じています。