容器组件找不到 Store答案

【问题标题】：Container Component cannot find Store容器组件找不到 Store
【发布时间】：2018-04-03 21:35:53
【问题描述】：

我遇到了这个错误：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 本身。我也尝试在Provider 中仅包装Filters，但这会引入RHL 重新加载商店的问题。

最后，我开始怀疑这与商店的配置方式有关。所以我正在浏览configure-store：

configure-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 在传递给 Provider 之前的屏幕截图。

【问题讨论】：

你能显示webpack.config.js，.babelrc吗？
没有看到任何奇怪的东西。也许尝试在const store = configureStore(props); 和configure-store.js 之后添加console.log(store)？可能是 import 语句的问题。
添加了店铺截图。出现如我所料。
奇怪。我唯一能想到的另一件事是，您在通往Filters 的路径上的某处有一个额外的<Provider>，因为在上下文中的商店似乎迷路了。要进行调试，您可以尝试将Filters 或一些连接的组件向上移动。如果您将其直接放在<Provider store={store}> 下，它应该可以工作。
@Oblosys 是的，我试了一下。没有骰子。即使我将提供程序移动为仅包装 Filters，也会出现同样的错误。我完全被难住了。

标签： reactjs redux react-redux

【解决方案1】：

为什么要使用传递给它的 jsx 来调用渲染？在 React 组件中，我们应该定义我们的渲染方法。类似的东西

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

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

小心不要与 reactDom.render 混淆。

【讨论】：

好电话，抱歉我在复制和粘贴。这不是问题。
您能向我们展示更多包含 Provider 的文件吗？您将名为 props 的东西传递给 configureStore 似乎有点奇怪，而不是您的 configure-store 文件建议的 initialState 对象。如果可能的话，我认为我们需要更多代码@Jose
const props 正在解析一些 JSON 并将其输入 configureStore。在此之前，它像这样直接传递到 Root 中：<Root {...props} />。将立即更新。
你能复制整个文件而不是只复制它们的 sn-ps 吗？这样我们就可以检查您的导入语句和其他可能相关的代码
我添加了导入。出于隐私原因，我无法添加一些代码，而且其中一些文件很大。

【解决方案2】：

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

【讨论】：

您是否有 git repo 可以在发布问题时返回到提交？可能有些地方出了问题

【解决方案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);
     ....
}

【讨论】：