redux TypeError:无法读取未定义的属性'getState'

lmyy7pcs  于 2022-11-12  发布在  其他
关注(0)|答案(6)|浏览(219)

我想尝试小redux示例,所以我安装了redux,但我得到了这个错误
TypeError:无法读取未定义的属性'getState'
新的提供程序webpack-internal:///./node_modules/react-redux/es/components/提供程序.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'));

有什么不对吗?

093gszye

093gszye1#

如果我们看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')
)
ibps3vxo

ibps3vxo2#

您需要将存储添加到提供程序。
如果没有任何异径管,则可以添加虚拟异径管。
假设虚拟约简器返回一个空数组。

() => []

因此,您的代码将更改为:

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

ubbxdtey3#

您可以添加虚拟存储,以便可以使用您的提供程序。

提供程序需要存储..

如果您不添加此,则会出现错误... TypeError:无法读取未定义的属性'getState'
因此添加..
如果您有任何问题,请联系我们。
所以你可以这样使用...

<Provider store={store}>
   <App />
</Provider>
hfwmuf9z

hfwmuf9z4#

我遇到了这个错误,因为我没有从store.js返回函数。
错误:导出常量makeStore =()=〉{配置存储({ reducer:主减速器,});}
正确答案:

export const makeStore = () =>
      configureStore({
        reducer: masterReducer,
      });
jc3wubiy

jc3wubiy5#

这是因为您还需要将store作为参数传递给Provider对象(作为prop store 的值),该对象 Package 应用程序。您可以这样做:
在 * index.js * 中:

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

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from "./store/reducer";

const store = createStore(reducer);

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

registerServiceWorker();

reducer.js 处:

const initialState = {
    counter: 0
}
const reducer = (state = initialState, action) => {
    return state;
}

export default reducer;

当然,在reducer中,您需要添加任何您想要执行的内容,这取决于 action 对象内部的类型参数,该参数也作为参数传递到reducer中。
示例(位于 index.js):

const initialState = {
    counter: 0
}

const reducer = (state = initialState, action) => {
    if (action.type === 'INC_COUNTER') {
        return {
            ...state,
            counter: state.counter + 1
        };
    }

    if (action.type === 'ADD_COUNTER') {
        return {
            ...state,
            counter: state.counter + action.value
        };
    }
}

export default reducer;
ffvjumwh

ffvjumwh6#

对我来说,这是因为我试图使用export default store而不是export const store(尽管ESLint对“首选导出默认值”规则喋喋不休)--这与@Sakar提到的答案相似。
例如:我有这个,它抛出的确切的错误消息的问题(错误):

const store = configureStore({
  reducer: {
    user,
    chat,
    email,
    invoice,
    calendar,
    permissions
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false
    })
})
export default store

这是当我收到的错误问这里在这篇文章。TypeError: Cannot read property ‘getState’ of undefined
所以我把它改成这样,它就工作了(它从redux中找到getState)(正确答案):

export const store = configureStore({
  reducer: {
    user,
    chat,
    email,
    invoice,
    calendar,
    permissions
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false
    })
})

相关问题