React Redux删除数组对象

Question

I started using redux a short time ago and I'm having a big problem, I'm trying to remove an object from an array but everytime i do that the map function doesn't work, any tips?

Reducer:

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

In a Redux reducer, you need to return the full new state .

Here, you have a state looking like this:

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

But your return an array like so:

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)
    ]

The new state is now the array and doesn't look like before. Hence, your code can't work with this new state.

Answer 2

You aren't updating the state correctly while handling the CLICK_DELETE_VALUE action. Its structure is changed. Update it like

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;
                    })
                }
            }