React store.getState 不是一个函数

问题描述 投票:0回答:9

这是我的代码:

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;
}

Routes.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 不是函数

有什么解决办法吗?

javascript reactjs redux-saga
9个回答
24
投票

这是一个拼写错误,导致了错误:

TypeError: store.getState is not a function

错了

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

正确

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

注意

()
上添加的括号
applyMiddleware


20
投票

就我而言,我收到此错误,因为我的

store
是一个函数,如下所示:

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>

13
投票

请注意,在您的

Routes.js
中,
store
未正确初始化。您应该添加这些行:

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

如您的

index.js
文件中所示。


11
投票

我正在这样做(动态要求)..

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

但是由于某种原因,当使用

require
而不是
import
时,你必须这样做..

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

3
投票

不确定这是否有帮助,但您将导入命名为 { Providers } 而不是 React-redux 库中的 { Provider } 。


3
投票

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

1
投票

这就是解决方案,祝你好运🤞

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

0
投票

TypeError: store.getState is not a function - 当您没有正确初始化中间件函数时,通常会发生此错误。您需要做的如下

您需要在 applyMiddleware ( ) 函数上添加括号,然后它就会按照您期望的方式运行。

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

0
投票

用 store() 替换 store 对我有用。写在下面:

<Provider store={store()}>
   {routes}
</Provider>
© www.soinside.com 2019 - 2024. All rights reserved.