找不到“商店"在"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)"的道具.可以将根组件包装在 ，或显式地将商店"作为道具传递给"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);

推荐答案

• 提供者， 将商店 传递给嵌套在其中的组件，通常只需要将其应用于 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 移至 <RootContainer> 组件文件，然后将connect RootContainer和 not传递给connect 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屋！