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

tracksSlice.ts:

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

interface TracksState {
  tracks: TrackModel[];
}

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

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

export const { toggleLike } = trackSlice.actions;

export const trackReducer = trackSlice.reducer;

LikeButton component:

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

interface LikeButtonProps {
    track: TrackModel
}

export const LikeButton = ({track}: LikeButtonProps) => {
    const dispatch = useDispatch();

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

    return (
        <button className='like-button' onClick={handleLikeToggle}>
            {
                track.isLiked ?
                    'дизлайк' :
                    'лайк'
            }
        </button>
    )
}

Now, when the LikeButton component is clicked, it will dispatch the toggleLike action with the track as the payload, toggling the like status of the track.