Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Curso 1 x Curso 2

Boa tarde. Não compreendi muito bem qual a diferença do exemplo do curso 1 para o curso 2.

No curso 1, o professor usou dessa maneira, pois dava um erro no console usar o .push no state:

const carrinhoSlice = createSlice({
  name: 'carrinho',
  initialState,
  reducers: {
    mudarCarrinho: (state, { payload }) => {
      const temItem = state.some(item => item.id === payload);
      if (!temItem) return **[
        ...state,
        {
          id: payload,
          quantidade: 1
        }
      ];**
      return state.filter(item => item.id !== payload);
    }
});

E no curso 2, usou apenas:

const itensSlice = createSlice({
  name: 'itens',
  initialState,
  reducers: {
    **cadastrarItem: (state, { payload }) => {
      state.push({ ...payload, id: uuid() });
    }**
  }
});

Não compreendi porque agora pode ser usado dessa maneira e no primeiro curso dava um erro no console. Não teria de retornar um estado novo também no exemplo do curso 2 - como foi feito no curso 1 - para funcionar? Por que o uso do .push deu um erro no curso 1 e não deu no curso 2, sendo que os dois estão adicionando itens novos a um array? Desde já, agradeço.

1 resposta
solução!

Oi Carolina, tudo bem?

Desculpa a demora em retornar.

A diferença entre os exemplos está na técnica de atualização do estado. No curso 1, foi utilizada a técnica de imutabilidade para criar um novo estado com as mudanças desejadas. No curso 2, foi utilizada a biblioteca Immer para permitir mutações no estado de forma segura.

O ideal é usar mutabilidade, mas o objetivo do primeiro curso era ensinar apenas como o Redux funciona. Então é no segundo curso que vemos como que funciona a mudança de estado em detalhes, por isso que ocorre essa mudança.

Espero ter ajudado a esclarecer sua dúvida.

Um abraço e bons estudos.