在“Connect(App)”的上下文或props中找不到“商店”

IT技术 javascript reactjs react-native redux react-redux
2021-04-03 09:40:17

在将多个文件的内容合并为一个作为 Redux 的配​​置后，我遇到了配置错误的 Redux 问题。

如何解决store，同时将其保存在一个文件中？

未处理的 JS 异常：在“Connect(App)”的上下文或props中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为props显式传递给“Connect(App)”。

'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    );
  }
}

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(App);
3个回答

  • Provider，将存储传递给嵌套在其中的组件，通常只需要应用于根组件（在您的情况下<RootContainer>

  • connect与提供商店的组件连接，而不是与提供商店的组件连接。

建议的解决方案：

MOVE将connect到<RootContainer>组件文件代替，并通过connect了RootContainer并没有在App组件：

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);  // <<--- here :)

更新：

鉴于 OP 希望在同一个文件中实现所有这些，您必须创建一个 React 元素来表示从 connect 创建的 Redux 容器，因此：

'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

// name has to be capitalised for React to recognise it as an element in JSX
const ConnectedRoot = connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}>
        <ConnectedRoot />    <------USE IT HERE
      </Provider>
    );
  }
}
好吧，这让我回到了两个文件。我在问是否可以将这个特定部分移动connect()到<App>组件中。
2021-05-22 09:40:17
由于您为 <RootContainer/> 定义了一个单独的文件，因此我只需将连接函数移到那里
2021-05-29 09:40:17
不，它没有。它一直显示相同的错误。可能是因为被实例化connect()后被调用<RootContainer />。
2021-06-04 09:40:17
从我的最后一条评论开始，我最初的建议应该有效。我认为您收到了相同的错误异常消息？
2021-06-16 09:40:17
这有帮助，但改变线路本身并没有完全解决问题。问题仍然存在于线路周围<Provider store={store}> <RootContainer /></Provider>。
2021-06-20 09:40:17

我在使用时遇到了这样的问题：

import connect from "react-redux/lib/connect/connect";

取而代之的是，使用：

import {connect} from "react-redux";
这个答案可能不适用于 OP 的帖子，但它在升级 react-redux 后解决了我的问题，这正是：错误的、被遗忘的绝对路径导入。比你！！！
2021-06-10 09:40:17

在您的根索引中放置提供程序。 

<Provider store={store}>
    <App />
</Provider>,
其它你可能感兴趣的问题
上一篇Webpack 排除特定文件 下一篇传单：未找到地图容器