Question

我遇到了这个错误：Invariant Violation: Could not find "store" in either the context or props of "Connect(Filters)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "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>
    )
  }
}

并且Filters正如此挂钩到Redux：

过滤器

class Filters extends Component {} ...

const mapStateToProps = (props) => {
  return props;
};

export default connect(mapStateToProps)(Filters);
// have also tried: connect()(Filters);

起初，我认为这可能只是组件连接到Redux商店的错误，但我在Root嵌套在Root内的几个不同组件上尝试了这一点，包括{{1}本身。我还尝试在Filters中仅包装Provider，但这会引入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返回一个空对象...

传递给提供商之前store的屏幕截图。

Answer 1

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

这样的东西

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

这允许我们使用组件this.props和this.state，并根据这些值推导出我们如何生成内容。

小心不要与reactDom.render混淆。

Answer 2

这最终变得奇怪了。我将react，react-dom和react-redux软件包降级到之前的几个版本并完全消除了错误。将软件包升级到最新版本以重现错误之后，我无法做到。

Answer 3

应该有效，但似乎有些东西会导致副作用。

您是否尝试更改AppContainer和Provider的位置，可能是HMR丢失了上下文。

  <AppContainer>
    <Provider store={store}>
      ....
    </Provider>
  </AppContainer>

另一个绝望的尝试是移动这两个：

 const sagaMiddleware = createSagaMiddleware();
 const enhancer = compose(applyMiddleware(sagaMiddleware, logger));

在configureStore中，如：

export default function configureStore(initialState) {
     const sagaMiddleware = createSagaMiddleware();
     const enhancer = compose(applyMiddleware(sagaMiddleware, logger));
     const store = createStore(rootReducer, initialState, enhancer);
     ....
}

容器组件找不到商店

3 个答案: