Question

我收到此错误：

Uncaught Error: Could not find "store" in either the context or props of "Connect(WebShop)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(WebShop)".

即使我已将我的组件包装在<Provider>标签中并将其链接到我的商店。这是我的app.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import store from '../store';

import App from 'views/App';
import Home from 'views/Home';
import Webshop from 'views/webshop';
import Cart from 'views/webcart';



ReactDOM.render(
    <Router history={ hashHistory }>
        <Provider store={store}>
            <Route path='/' component={ App }>
                <IndexRoute component={ Home } />
                <Route path='Webshop' component={ Webshop } />
                <Route path='Cart' component={ Cart } />
            </Route>
        </Provider> 
    </Router>,
    document.getElementById('app') // eslint-disable-line
);

我的store.js是：

import { createStore, applyMiddleware } from 'redux';
import  reducer  from './reducers';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';


var initialState = {
  cart:"medium",
  data: [],
  url: "/api/comments",
  pollInterval: 2000
}

const store = createStore(
  reducer,
  applyMiddleware(
    createLogger(),
    thunkMiddleware
  )
);
export default store;

我在我使用的connect中使用webshop.js：

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

export default connect(null, mapDispatchToProps)(WebShop);

如果需要更多代码来查找解决方案，请通知我。现在，我不确定此错误是来自webshop.js文件还是来自组件和商店之间的链接。为什么我会收到此错误以及如何解决？

Answer 1

替换路由器和提供商的顺序。

ReactDOM.render(
    <Provider store={store}>
        <Router history={ hashHistory }>
            <Route path='/' component={ App }>
                <IndexRoute component={ Home } />
                <Route path='Webshop' component={ Webshop } />
                <Route path='Cart' component={ Cart } />
            </Route>
        </Router>,
    </Provider> 
    document.getElementById('app') // eslint-disable-line
);

如何解决与Provider my store链接的问题，并将数据传递给我的Redux-React应用程序中的组件？

1 个答案: