Сервис быстрых ответов от искусственного интеллекта
Вопрос пользователя:
Ответ нейросети:
tracksSlice.ts:
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getTracks } from '../api/getTracks';
const initialState = {
tracks: [],
status: 'idle',
};
export const fetchTracks = createAsyncThunk(
'tracks/fetchTracks',
async () => {
const response = await getTracks();
return response;
}
);
const tracksSlice = createSlice({
name: 'tracks',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchTracks.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchTracks.fulfilled, (state, action) => {
state.status = 'idle';
state.tracks = action.payload;
});
},
});
export default tracksSlice.reducer;
App.tsx:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTracks } from './tracksSlice';
const App = () => {
const dispatch = useDispatch();
const tracks = useSelector((state) => state.tracks.tracks);
const status = useSelector((state) => state.tracks.status);
useEffect(() => {
dispatch(fetchTracks());
}, [dispatch]);
return (
<div>
{status === 'loading' ? (
<p>Loading...</p>
) : (
<ul>
{tracks.map((track) => (
<li key={track.id}>{track.name}</li>
))}
</ul>
)}
</div>
);
};
export default App;
Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.