index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { combineReducers, createStore } from 'redux'
import { Provider } from 'react-redux'
import productReducer from './reducers/product-reducers'
import userReducer from './reducers/user-reducer'
const allReducers = combineReducers({
products: productReducer,
user: userReducer
})
const store = createStore(
allReducers,
{
products: [{name: 'iPhone'}],
user: 'Michael'
},
window.devToolsExtension && window.devToolsExtension()
);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
const mapStateToProps = state => {
return state
}
export default connect(mapStateToProps)(App);
在我的应用程序中附加了提供程序后,它会不断出现以下错误:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
我不认为3是个问题,因为我已经通过npm ls react
检查了是否只安装了一个反应。
如何处理此问题?