ЯсноПонятно24

tracksSlice.ts:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { TrackModel } from '../models/TrackModel';

interface TracksState {
  tracks: TrackModel[];
}

const initialState: TracksState = {
  tracks: [],
};

const tracksSlice = createSlice({
  name: 'tracks',
  initialState,
  reducers: {
    toggleLike(state, action: PayloadAction<TrackModel>) {
      const track = state.tracks.find((t) => t.id === action.payload.id);
      if (track) {
        track.liked = !track.liked;
      }
    },
  },
});

export const { toggleLike } = tracksSlice.actions;

export default tracksSlice.reducer;

LikeButton.tsx:

import React from 'react';
import { useDispatch } from 'react-redux';
import { toggleLike } from '../redux/tracksSlice';
import { TrackModel } from '../models/TrackModel';

interface LikeButtonProps {
  track: TrackModel;
}

const LikeButton: React.FC<LikeButtonProps> = ({ track }) => {
  const dispatch = useDispatch();

  const handleLike = () => {
    dispatch(toggleLike(track));
  };

  return (
    <button onClick={handleLike}>
      {track.liked ? 'Unlike' : 'Like'}
    </button>
  );
};

export default LikeButton;