React store.getState 不是函數

Question

這是我的代碼：

store.js

import {createStore, applyMiddleware, compose} from 'redux';
import {fromJS} from 'immutable';
import {routerMiddleware} from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(initialState = {}, history) {
    // Create the store with two middlewares
    // 1. sagaMiddleware: Makes redux-sagas work
    // 2. routerMiddleware: Syncs the location/URL path to the state
    const middlewares = [sagaMiddleware, routerMiddleware(history)];

    const enhancers = [applyMiddleware(...middlewares)];

    const store = createStore(createReducer, fromJS(initialState), enhancers);

    // Extensions
    store.runSaga = sagaMiddleware.run;
    store.asyncReducers = {}; // Async reducer registry

    return store;
}

路由.js

import React from 'react';
import {Route, Router, IndexRoute, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import store from './store';

import Welcome from './containers/Welcome';

const history = syncHistoryWithStore(browserHistory, store);

const routes = (
    <Router history={history}>
        <Route path="/">
              <IndexRoute component={Welcome} />
        </Route>
    </Router>
);

export default routes;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';


const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
    <Provider store={store}>
        {routes}
    </Provider>, document.getElementById('main-content')
);

我找不到罪魁禍首在哪里。 我試圖調試它，但找不到真正導致這些錯誤的原因。 錯誤：未捕獲的類型錯誤：store.getState 不是函數

有什么解決辦法嗎？

Answer 1

這是一個產生錯誤的錯字： TypeError: store.getState is not a function

錯誤的

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

正確的

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

請注意applyMiddleware上添加的括號() 。

Answer 2

請注意，在您的Routes.js ， store未正確初始化。 您應該添加這些行：

  const initialState = {};
  const store = configureStore(initialState, browserHistory);

就像在你的index.js文件中一樣。

Answer 3

我正在這樣做（動態要求）..

    const store = require('../store/app')
    state = store.getState()

但是出於某種原因，在使用require而不是import您必須這樣做..

    const store = require('../store/app')
    state = store.default.getState()

Answer 4

希望它會有所幫助，但在我的情況下，我收到此錯誤，因為我的商店如下所示，這是一個函數：

 const store = preloadedState => {
    let initialState={}
    //some code to modify intialState
   
    return createStore(reducer, initialState)
}

但在 index.js 中，我將 store 作為函數傳遞，而不是它返回的值。

錯

<Provider store={store}>
    <MyApp />
</Provider>

正確的

<Provider store={store()}>
    <MyApp />
</Provider>

Answer 5

不確定這是否會有所幫助，但您從 react-redux 庫中命名了 import { Providers } 而不是 { Provider } 。

Answer 6

這就是解決方案，祝你好運🤞

import { applyMiddleware, combineReducers, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk'

const reducer = combineReducers({
    products: []
})

const middleware = [thunk]

const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store

Answer 7

    <Provider store={store().store}>
        <MyApp />
    </Provider>

Answer 8

在 index.js 中，我們必須提供store()方法作為 props 值而不是store 。

<Provider store={store()}>
   {routes}
</Provider>

更新了index.js文件。

import React from 'react';
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import { Providers } from 'react-redux';
import configureStore from './store';
import routes from './routes';


const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
    <Provider store={store()}>
        {routes}
    </Provider>, document.getElementById('main-content')
);

Answer 9

TypeError: store.getState is not a function - 當您沒有正確初始化中間件函數時，通常會發生此錯誤。 您需要做的如下

您需要在 applyMiddleware ( ) 函數上添加括號，然后它會按照您的預期運行。

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

Answer 10

用 store() 替換 store 對我有用。 寫在下面：

<Provider store={store()}>
   {routes}
</Provider>