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

Could not find "store" in either the context or props of "Connect(App)"

提问by Peter G.

I'm having problems with misconfigured Redux after merging contents of multiple files into one to serve as config for Redux.

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

How to resolve store, while keeping this in one file?

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

Unhandled JS Exception: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(App)".

未处理的 JS 异常：在“Connect(App)”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“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);

采纳答案by Pineda

• Provider, passes the storeto the component nested within it and generally only needed to be applied to the rootcomponent (in your case <RootContainer>

• connectconnect with the component providing store and notthe component that has store provided to it.

• 提供者，将商店传递给嵌套在其中的组件，通常只需要应用于根组件（在您的情况下<RootContainer>

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

SUGGESTED SOLUTION:

建议的解决方案：

MOVEthe connectto the <RootContainer>component file instead, and pass connectthe RootContainer and notthe App component:

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

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

---

---

UPDATE:

更新：

Given the OP wants to achieve all of this in the same file, you'll have to create a React element that represents your Redux container created from connect, so:

鉴于 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>
    );
  }
}

回答by Md Forhad Sarkar

In your root index put the provider.

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

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