Вопрос пользователя:
Где ошибка:
import {createSlice} from '@reduxjs/toolkit'
import {TrackModel} from '../models/Track';
import {tracks} from '../data/tracks';
import { PayloadAction } from '@reduxjs/toolkit';
// interface TrackListState {
// tracks: TrackModel[]
// }
// const initialState: TrackListState = {
// tracks
// }
// const tracksSlice = createSlice({
// name: 'tracks',
// initialState,
// reducers: {},
// selectors: {
// selectTracks: (sliceState) => {
// return sliceState.tracks
// }
// }
// })
// export const { selectTracks } = tracksSlice.selectors
// export default tracksSlice.reducer;
interface TracksState {
tracks: TrackModel[];
}
const initialState: TracksState = {
tracks: [],
};
export const trackSlice = createSlice({
name: 'playlist',
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;
import './styles.css';
import {TrackModel} from '../../models/Track';
import { useDispatch } from 'react-redux';
import { toggleLike } from '../../slices/tracksSlice';
// interface LikeButtonProps {
// track: TrackModel
// }
// export const LikeButton = ({track}: LikeButtonProps) => {
// return (
// <button className='like-button'>
// {
// track.isLiked ?
// 'дизлайк' :
// 'лайк'
// }
// </button>
// )
// }
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>
)
}
import {Layout} from '../components/Layout/Layout';
import {TrackList} from '../components/TrackList/TrackList';
import {useSelector} from 'react-redux';
import {RootState} from '../store/store';
import {TrackModel} from '../models/Track';
import {selectTracks} from "../slices/tracksSlice";
export const App = () => {
const tracks = useSelector<RootState, TrackModel[]>(selectTracks);
return (
<Layout>
<TrackList tracks={tracks}/>
</Layout>
)
}
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Ошибка в импорте в компоненте App:
import {selectTracks} from "../slices/tracksSlice";
Должно быть:
import {selectTracks} from '../slices/tracksSlice';