Как исправить «Не удалось найти магазин ни в контексте, ни в реквизитах проблемы Connect (Provider)» (ReactJs, Redux, SimpleWebRTC)?

Я пытаюсь запустить приложение SimpleWebRTC отсюда: https://docs.simplewebrtc.com/#/?id=getting-started

Файл App.js:

import React from "react";
import { Provider } from "react-redux";
import ReduxToastr from "react-redux-toastr";
import store from "./redux/store/index";
import Routes from "./routes/Routes";

const App = () => (
  <Provider store={store}>
    <Routes />
    <ReduxToastr
      timeOut={5000}
      newestOnTop={true}
      position="top-right"
      transitionIn="fadeIn"
      transitionOut="fadeOut"
      progressBar
      closeOnToastrClick
    />
  </Provider>
);

export default App;

./redux/store/index.js файл:

import { combineReducers } from "redux";

import sidebar from "./sidebarReducers";
import layout from "./layoutReducer";
import theme from "./themeReducer";
import app from "./appReducer";
import auth from "./authReducer";
import { reducer as simplewebrtc } from '@andyet/simplewebrtc';
import { reducer as toastr } from "react-redux-toastr";

export default combineReducers({
  sidebar,
  layout,
  theme,
  toastr,
  app,
  auth,
  simplewebrtc
});

./redux/store/index.js файл:

import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import rootReducer from "../reducers/index";

const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {}

var store

if(persistedState.app){
    store = createStore(rootReducer, persistedState, applyMiddleware(thunk));
}else{  
    store = createStore(rootReducer, applyMiddleware(thunk));
}

store.subscribe(()=>{
    localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})


export default store;

Файл Chat.js:


const API_KEY = '';
const ROOM_PASSWORD = 'test';
const CONFIG_URL = `https://api.simplewebrtc.com/config/guest/${API_KEY}`
const ROOM_NAME = 'uniq-room-name'

class _SimpleWebRtc extends React.Component {

  constructor(props) {
    super(props);
  }

  render(){


    return (
        <SWRTC.Provider configUrl={CONFIG_URL}>      {/* <------- problem here */}
          {/* Render based on the connection state */}
          <SWRTC.Connecting>
            <h1>Connecting...</h1>
          </SWRTC.Connecting>

          <SWRTC.Connected>
            <h1>Connected!</h1>

            <SWRTC.RequestUserMedia audio auto />

            <SWRTC.Room name={ROOM_NAME} password={ROOM_PASSWORD}>
              <SWRTC.RemoteAudioPlayer />
            </SWRTC.Room>

          </SWRTC.Connected>
        </SWRTC.Provider>
    )
  }
}

const SimpleWebRtc = connect(store => ({simplewebrtc: store.simplewebrtc})) (_SimpleWebRtc)

Когда я пытаюсь запустить этот код, он возвращает мне следующую ошибку:

app.js: 58464 Неперехваченное инвариантное нарушение: не удалось найти «магазин» ни в контексте, ни в свойствах «Подключиться (поставщик)». Либо оберните корневой компонент в a, либо явно передайте «store» в качестве опоры для «Connect (Provider)».

У вас есть идеи, что не так с этим кодом и как решить эту проблему?


person Roman Grinev    schedule 10.05.2019    source источник


Ответы (1)


Я тоже столкнулся с этой проблемой и решил проблему, обновив пакеты. Вы должны использовать

  • react@^16.8.4
  • react-dom@^16.8.4
  • react-redux@^7.0.0
  • redux@^4.0.0
  • redux-thunk@^2.3.0

Вот требования для simplewebRTC

https://docs.simplewebrtc.com/#/ReactVersions

person Imran    schedule 23.05.2019
comment
Спасибо за ваш ответ. Вот что у меня: "react": "^16.8.6", "react-dom": "^16.8.6", "react-redux": "^7.0.3", "redux": "4.0.1", "redux-thunk": "^2.3.0", - person Roman Grinev; 24.05.2019
comment
Он работает, только если я использую ‹SWRTC.Room store = {store}›, а не просто ‹SWRTC.Room›. Мне нужно добавить store = {store} к каждому тегу SWRTC, чтобы он заработал. Это не работает так, как описано в примере для начала работы. - person Roman Grinev; 24.05.2019