Я изучаю response-redux, я не мог понять, что происходит, когда я обертываю компонент приложения с помощью Provider.

Ошибка: неверный вызов Hook

https://i.stack.imgur.com/yFSnF.png

Но если я не заверну, это нормально. Теперь мой вопрос в чем ошибка в моем коде? Корневой компонент:

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import App from './components/App'; import reducers from './reducers'; const store = createStore(reducers); ReactDOM.render( {amp}lt;Provider store={store}{amp}gt; {amp}lt;App/{amp}gt; {amp}lt;/Provider{amp}gt; , document.getElementById('root') ); 

Компонент приложения:

 import React from 'react'; import SongList from './songList'; const App = ()={amp}gt;{ return ( {amp}lt;div{amp}gt; {amp}lt;SongList /{amp}gt; {amp}lt;/div{amp}gt; ); }; export default App; 

Компонент SongList:

 import React from 'react'; class SongList extends React.Component{ render(){ return( {amp}lt;div className='ui divided list'{amp}gt; {amp}lt;div className='ui header'{amp}gt; {amp}lt;div className='title'{amp}gt; Song List {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className='ui button primary'{amp}gt; Select {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } }; export default SongList; 

Редукторы:

 import {combineReducers} from 'redux'; const songReducer = ()={amp}gt;{ return [ {title:'Zikrullah', duration: 4.05}, {title: 'Madina', duration: 5.50}, {title: 'Sunnat', duration: 3.96}, {title: 'Mandatory', duration:5.16} ] }; const selectedSongReducer = (selectedSong = null, action) ={amp}gt; { if(action.type === 'SONG_SELECTED'){ return action.payload; } return selectedSong; }; export default combineReducers({songs: songReducer, selectedSong: selectedSongReducer}); 

Действие:

 export const selectSong = (song)={amp}gt; { return { type: 'SONG_SELECTED', payload:song }; }; 

Я пытаюсь определить неправильную часть кода в течение двух дней. Я не мог определить. Пожалуйста, помогите мне решить проблему.