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

[Dúvida] Redux não salva o estado do meu item quando volto para a tela inicial e entro na categoria novamente

Itens Reducer

const itensSlice = createSlice({
  name: "itens",
  initialState,
  reducers: {
    mudarFavorito: (state, { payload }) => {
      state = state.map((item) => {
        item.favorito = item.id == payload ? !item.favorito : item.favorito;
      });
    },
  },
});

export const { mudarFavorito } = itensSlice.actions;

Componente Item

function Item(props) {
  const {
    id,
    titulo,
    foto,
    preco,
    descricao,
    favorito
  } = props

  const dispatch = useDispatch();

  function handleFavorite() {    
    dispatch(mudarFavorito(id));
  }

  return (
    <div className={styles.item}>
      <div className={styles['item-imagem']}>
        <img src={foto} alt={titulo} />
      </div>
      <div className={styles['item-descricao']}>
        <div className={styles['item-titulo']}>
          <h2>{titulo}</h2>
          <p>{descricao}</p>
        </div>
        <div className={styles['item-info']}>
          <div className={styles['item-preco']}>
            R$ {preco.toFixed(2)}
          </div>
          <div className={styles['item-acoes']}>
            {favorito
              ? <AiFillHeart {...iconProps} color='#ff0000' className={styles['item-acao']} onClick={handleFavorite} />
              : <AiOutlineHeart {...iconProps} className={styles['item-acao']} onClick={handleFavorite} />
            }
            <FaCartPlus
              {...iconProps}
              color={true ? '#1875E8' : iconProps.color}
              className={styles['item-acao']}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Item
1 resposta
solução!

Descobri o problema, no componente Navbar é necessário trocar o elemento <a></a> para o <Link to="/"/>