Could not find "store" in either the context or props

[rahulppatidar]

Hi,

I'm getting this error.

Could not find "store" in either the context or props of "Connect(withProps(withHandlers(withContext(lifecycle(JPlaylist)))))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(withProps(withHandlers(withContext(lifecycle(JPlaylist)))))".

Please help me to resolve this error.

Thanks.

[MartinDawson]

Have you seen https://github.com/jplayer/react-jPlayer-examples?

[rahulppatidar]

@MartinDawson Yes I have seen this and implement it.

index.js `import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux' import { Router } from "react-router-dom"; import 'bootstrap/dist/css/bootstrap.min.css'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import store from './_helper/store'; import history from './_helper/history';

ReactDOM.render(
<Provider store={store}>
    <Router history={history}> 
        <App /> 
    </Router>
</Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister();`

store.js `import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import RootReducer from '../_reducers/index'

const store = createStore(RootReducer, applyMiddleware(thunk));

export default store;`

rootReducer.js ` import { combineReducers } from 'redux'; import { reducer as jPlayers } from 'react-jplayer'; import { reducer as jPlaylists } from 'react-jplaylist'; import {authentication} from './authenticationReducer'; import {alert} from './alertReducer'; import {audioReducer} from './audioReducer'; import {videoReducer} from './videoReducer'; import {userReducer} from './userReducer'; import {membershipReducer} from './membershipReducer'; import {searchReducer} from './searchReducer';

const RootReducer = combineReducers({ authentication, alert, audioReducer, videoReducer, userReducer, membershipReducer, searchReducer, jPlayers, jPlaylists

});

export default RootReducer;`

Player.js

`import React from 'react'; import JPlayer, { Gui, SeekBar, BufferBar, Poster, Audio, Title, FullScreen, Mute, Play, PlayBar, VolumeBar, Duration, CurrentTime, Download, BrowserUnsupported, } from 'react-jplayer'; import JPlaylist, { initializeOptions, Playlist, Shuffle, Next, Previous, Repeat, TogglePlaylist, Remove, MediaLink, Title as PlaylistTitle, actions } from 'react-jplaylist';

const jPlayerOptions = { id: 'FooterPlaylist', verticalVolume: true, };

const jPlaylistOptions = { hidePlaylist: true, playlist: [ { id: 0, title: 'Tempered Song', artist: 'Miaow', sources: { flv: '/video/small.flv', oga: 'http://techslides.com/demos/sample-videos/small.mp4', }, }, { id: 1, title: 'Cro Magnon Man', artist: 'The Stark Palace', sources: { mp3: 'http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3', oga: 'http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg', }, }, ], };

initializeOptions(jPlayerOptions, jPlaylistOptions);

const FooterPlaylist = () => (