Реагировать Redux удалить массив объектов

Question

Я начал использовать redux совсем недавно, и у меня возникла большая проблема, я пытаюсь удалить объект из массива, но каждый раз, когда я делаю это, функция карты не работает, какие-либо советы?

Редуктор:

const initialState = {
    lojaState: {
        nome: "Café", cardapio: [{
            setor: 'Salgados', produtos: [
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "3,00"},
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "2,50" }
            ]
        }]
    }
};

export const lojaReducer = (state = initialState, action) => {
    switch (action.type) {
        case CLICK_UPDATE_VALUE:
            return state;
        case CLICK_DELETE_VALUE:
            return [
                ...state.lojaState.cardapio[action.carIndex].produtos.slice(0, action.proIndex),
                ...state.lojaState.cardapio[action.carIndex].produtos.slice(action.proIndex + 1)
            ]
        default:
            return state;
    }
}

Action.js

export const removeProduto = (cardapioIndice, produtoIndice) => ({
type: CLICK_DELETE_VALUE,
proIndex: produtoIndice,
carIndex: cardapioIndice});

Cardapio.js

 loja.cardapio.map((cardapio, indCardapio) => (
 <Row>
    {   
        cardapio.produtos.map((produto, indProduto) => (
            <Col md={4} sm={6} xs={12}>
                <Thumbnail src={thumbnail}>
                    <h3>Nome: {produto.nome}</h3>
                    <p>Descricao: {produto.descricao}</p>
                    <p>Valor: R$ {produto.valor}</p>
                </Thumbnail>
                <Button bsStyle="danger" onClick={() => removeProduto(indCardapio,indProduto)}>Delete</Button>
            </Col> 
        ))
    }
</Row>
))

Answer 1

Вы неправильно обновляете состояние при обработке действия CLICK_DELETE_VALUE.Его структура изменилась.Обновите это как

case CLICK_DELETE_VALUE:
            return  {
                ...state,
                lojaState: {
                    ...state.lojaState, 
                    cardapio: state.lojaState.cardapio.map((item, index) => {
                          if (index === action.carIndex) {
                               return {
                                  ...item,
                                  productos: [...item.productos.slice(0, action.proIndex),  ...item.productos.slice(action.proIndex + 1)]
                               }
                          }
                          return item;
                    })
                }
            }

Answer 2

В редукторе Redux вам необходимо вернуть полностью новое состояние .

Здесь у вас есть состояние, похожее на это:

const initialState = {
    lojaState: {
        nome: "Café", cardapio: [{
            setor: 'Salgados', produtos: [
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "3,00"},
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "2,50" }
            ]
        }]
    }
};

Но вашевернуть массив следующим образом:

case CLICK_DELETE_VALUE:
    return [
        ...state.lojaState.cardapio[action.carIndex].produtos.slice(0, action.proIndex),
        ...state.lojaState.cardapio[action.carIndex].produtos.slice(action.proIndex + 1)
    ]

Новое состояние теперь является массивом и выглядит не так, как раньше.Следовательно, ваш код не может работать с этим новым состоянием.