类型错误：无法读取未定义的属性“getState”

Question

我想尝试小的 redux 示例，所以我安装了 redux，但出现此错误

类型错误：无法读取未定义的属性“getState”

新提供者 webpack-internal:///./node_modules/react-redux/es/components/Provider.js:24:25

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import './index.css';

const App = () => (<div>Hi </div>);

ReactDOM.render(<Provider><App /></Provider>, document.getElementById('root'));

怎么了 ？

Answer 1

如果我们往里面看 react-redux <Provider />

<Provider />期望提供一个store道具：

this.state = {
  storeState: store.getState(),
                   ^^here
  store
}

因此错误。

但是，您可以使用减速器创建一个，应该类似于以下内容：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducer'
import App from './components/App'

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Answer 2

您需要向您的提供商添加商店。

如果您没有任何减速器，您可以添加一个虚拟减速器。

假设虚拟减速器返回一个空数组。

() => []

因此，您的代码将更改为：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'; 

const store = createStore(() => [], {}, applyMiddleware());

import './index.css';

const App = () => (<div>Hi </div>);

ReactDOM.render(<Provider store={store}><App /></Provider>, 
document.getElementById('root'));