找不到“商店"在“Connect(App)"的上下文或道具中； [英] Could not find "store" in either the context or props of "Connect(App)"

问题描述

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

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

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

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

未处理的 JS 异常:在任一上下文中都找不到商店"或Connect(App)"的道具.要么将根组件包装在一个，或者明确地将store"作为道具传递给Connect(App)".

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)".

'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);

推荐答案

• 提供者，将 store 传递给嵌套在其中的组件，通常只需要应用于 root 组件(在您的情况下

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

    connect 连接提供商店的组件，而不是连接提供商店的组件.

    connect connect with the component providing store and not the component that has store provided to it.

    MOVE connect 到 组件文件，并通过 connect RootContainer 和 not App 组件:

    MOVE the connect to the <RootContainer> component file instead, and pass connect the RootContainer and not the App component:

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

    <小时>

    更新:

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

    ---

    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:

    '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)"的上下文或道具中；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！