Container Component找不到Store

Question

Container Component找不到Store

我遇到了这个错误: 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
);

Run Code Online (Sandbox Code Playgroud)

根组件

export default Root extends Component {

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

Run Code Online (Sandbox Code Playgroud)

并且Filters像这样被挂钩到Redux:

过滤器

class Filters extends Component {} ...

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

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

Run Code Online (Sandbox Code Playgroud)

起初,我认为这可能只是组件如何连接到Redux存储的错误,但是我已经尝试了嵌套在Root包含Root自身内部的几个不同组件.我也尝试过只包装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;
}

Run Code Online (Sandbox Code Playgroud)

到目前为止我的问题:我正在配置商店的方式有什么不妥之处,还是有其他我在这里看不到的东西？谢谢.

编辑:

应该可以从根组件访问redux存储this.context.store.从根组件记录时,this.context返回一个空对象...

store在传递给Provider之前的屏幕截图.

Answer 1

小智 2

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

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

Run Code Online (Sandbox Code Playgroud)

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

小心不要与reactDom.render 混淆。

归档时间：	7 年，7 月前
查看次数：	419 次
最近记录：	7 年，7 月前