我遇到了这个错误：不变违规：无法在“连接(过滤器)”的上下文或道具中找到“存储”.将根组件包装在< Provider>中,或者将“store”显式传递为“Connect(Filters)”.
应用程序的根看起来像这样：
import { AppContainer } from 'react-hot-loader';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import Root from './Root';
import configureStore from './store/configure-store';
const props = Object.assign({},JSON.parse(document.getElementById('initial-json').innerHTML));
const reduxProps = { filters: props.filters };
const store = configureStore(reduxProps);
render(
<Provider store={store}>
<AppContainer>
<Root {...props} />
</AppContainer>
</Provider>,reactRoot
);
根组件
export default Root extends Component {
render() {
return(
<div className="someClass">
<Filters />
<Body />
</div>
)
}
}
并且过滤器正在被挂钩到Redux中,如下所示：
过滤器
class Filters extends Component {} ...
const mapStateToProps = (props) => {
return props;
};
export default connect(mapStateToProps)(Filters);
// have also tried: connect()(Filters);
起初,我认为这可能只是组件如何连接到Redux存储的错误,但是我已经尝试了嵌套在Root内部的几个不同的组件,包括Root本身.我还尝试仅在提供程序中包装过滤器,但这会引入RHL重新加载存储的问题.
最后,我开始怀疑这与商店的配置方式有关.所以我正在通过configure-store查看：
配置-store.js
import { createStore,applyMiddleware,compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import logger from 'redux-logger';
import rootReducer from '../reducers';
import rootSaga from '../sagas';
const sagaMiddleware = createSagaMiddleware();
const enhancer = compose(applyMiddleware(sagaMiddleware,logger));
export default function configureStore(initialState) {
const store = createStore(rootReducer,initialState,enhancer);
sagaMiddleware.run(rootSaga);
if (module.hot) {
/* eslint-disable */
module.hot.accept('../reducers',() =>
store.replaceReducer(require('../reducers').default)
);
}
return store;
}
到目前为止我的问题：我正在配置商店的方式有什么不妥之处,还是有其他我在这里看不到的东西？谢谢.
编辑：
应该可以通过this.context.store从根组件访问redux存储.从根组件记录时,this.context返回一个空对象…
存储在传递给Provider之前的屏幕截图.
