在“连接（应用）”的上下文或道具中找不到“商店”

Posted 2023-02-22

【中文标题】在“连接（应用）”的上下文或道具中找不到“商店”

【英文标题】：Could not find "store" in either the context or props of "Connect(App)"

【发布时间】：2017-06-13 01:13:48

【问题描述】：

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

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

未处理的 JS 异常：在任一上下文中都找不到“商店” 或“连接（应用）”的道具。要么将根组件包装在 ，或将“store”作为道具显式传递给“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);

【参考方案1】：

Provider，passes the store 到嵌套在其中的组件，通常只需要应用于 root 组件（在您的情况下为 <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>
    );
  

【讨论】：

这有帮助，但改变线路本身并不能完全解决问题。问题仍然存在于<Provider store=store> <RootContainer /></Provider>。

很好，这让我回到了两个文件。我在问是否可以将带有 connect() 的特定部分移动到 <App> 组件中。

暂无我的最后一条评论，我最初的建议应该有效。我认为您收到相同的错误异常消息？

不，它没有。它一直显示相同的错误。可能是因为 connect() 在 <RootContainer /> 被实例化之后被调用。

既然你为 定义了一个单独的文件，我只需将连接函数移到那里

【参考方案2】：

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

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

代替那个，使用：

import connect from "react-redux";

【讨论】：

这个答案可能不适用于 OP 的帖子，但它在升级 react-redux 后解决了我的问题，这正是：一个错误的、被遗忘的绝对路径导入。比你！！！

【参考方案3】：

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

<Provider store=store>
    <App />
</Provider>,