В этом задании вы потренируетесь создать store для простого приложения и использовать функцию createSlice. У нас есть список треков, каждому из которых можно поставить лайк, но в данный моме

Вопрос пользователя:

В этом задании вы потренируетесь создать store для простого приложения и использовать функцию createSlice. У нас есть список треков, каждому из которых можно поставить лайк, но в данный момент нажатие на кнопку лайка ни к чему не приводит — это нормально. В коде изначально есть: Компонент App — корневой компонент приложения. Он через props передает массив треков в компонент списка треков TrackList. Также в файле с этим компонентов инициализируется начальное состояние для всего приложения. Файл data/data.ts — в нем мы храним массив треков. Именно отсюда импортируются данные в App и используются для инициализации состояния. Вам нужно перенести инициализацию состояния из App в стор редакса с использованием функций из redux-toolkit. Для этого необходимо: Создать папку src/slice с файлом tracksSlice.ts. В файле tracksSlice.ts с помощью createSlice нужно создать слайс. В этот слайс нужно перенести состояние, которое сейчас лежит в App. Пока что никаких action для слайса создавать не требуется. Создать папку src/store и в ней файл store.ts. В файле store.ts создать стор с помощь функции configureStore. К этому стору нужно подключить слайс, который вы создали на предыдущем шаге. В компоненте App удалите использование массива треков, который импортируется напрямую из data/tracks . Используйте массив, который лежит в состоянии из redux стора Чтобы получить данные из стора в компоненте App : создайте селектор для слайса в файле tracksSlice.ts используйте хук useSelector в компоненте App import {Layout} from '../components/Layout/Layout'; import {TrackList} from '../components/TrackList/TrackList'; import {tracks} from '../data/tracks'; import {TrackModel} from "../models/Track"; interface TrackListState { tracks: TrackModel[] } const initialState: TrackListState = { tracks } export const App = () => { return ( <Layout> <TrackList tracks={initialState.tracks}/> </Layout> ) } import {TrackModel} from '../models/Track'; export const tracks: TrackModel[] = [ { id: 1, title: 'Space Oddity', duration: '5:15', isLiked: false, }, { id: 2, title: 'The Man Who Sold The World', duration: '3:59', isLiked: false, }, { id: 3, title: 'Starman', duration: '4:14', isLiked: false, } ]

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

// src/slice/tracksSlice.ts

import { createSlice } from '@reduxjs/toolkit'; import { RootState } from '../store/store'; import { TrackModel } from '../models/Track';

interface TrackListState { tracks: TrackModel[] }

const initialState: TrackListState = { tracks: [] }

const tracksSlice = createSlice({ name: 'tracks', initialState, reducers: {} });

export const selectTracks = (state: RootState) => state.tracks.tracks;

export default tracksSlice.reducer;

// src/store/store.ts

import { configureStore } from '@reduxjs/toolkit'; import tracksReducer from '../slice/tracksSlice';

export const store = configureStore({ reducer: { tracks: tracksReducer } });

// App.tsx

import { Layout } from '../components/Layout/Layout'; import { TrackList } from '../components/TrackList/TrackList'; import { useSelector } from 'react-redux'; import { selectTracks } from '../slice/tracksSlice';

export const App = () => { const tracks = useSelector(selectTracks);

return (
	<Layout>
		<TrackList tracks={tracks}/>
	</Layout>
)

}

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

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

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: