reactjs – Container Component找不到Store

我遇到了这个错误：不变违规：无法在“连接(过滤器)”的上下文或道具中找到“存储”.将根组件包装在< 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之前的屏幕截图.

为什么要调用jsx传递给它的渲染？在React组件中,我们应该定义我们的render方法.就像是

render() {
    return (
        <div className="someClass">
            <Filters />
            <Body />
        </div>
    )
}

这允许我们使用组件this.props和this.state,并导出我们如何基于这些值生成内容.

小心不要与reactDom.render混淆.

reactjs – Container Component找不到Store

相关文章