时间戳

首页 > 解决方案 > 无法读取未定义的属性“getState”-Redux

javascript - 无法读取未定义的属性“getState”-Redux

问题描述

我有一个 React 应用程序，现在我使用 redux。该应用程序有效，但现在我收到错误消息：

Uncaught TypeError: Cannot read property 'getState' of undefined
    at new Provider (Provider.js:25)
    at vf (react-dom.production.min.js:132)
    at Og (react-dom.production.min.js:167)
    at Tg (react-dom.production.min.js:180)
    at bi (react-dom.production.min.js:232)
    at ci (react-dom.production.min.js:233)
    at Di (react-dom.production.min.js:249)
    at Yh (react-dom.production.min.js:248)
    at Xh (react-dom.production.min.js:245)
    at qf (react-dom.production.min.js:243)

有人可以帮忙吗？

代码：

商店.js：

import {
  combineReducers,
  createStore
} from 'redux';

import campaignReducer from './campaign/reducer';

const reducer = combineReducers({
  campaign: campaignReducer
});


const enhancedCreateStore = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default enhancedCreateStore;

应用程序.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter as Router
} from 'react-router-dom';
import {
  Provider
} from 'react-redux';
// tell webpack about all used svg images
/* eslint-disable */
import svgSprite from './js/services/helper';
/* eslint-enable */

import Shop from './js/components/shop';
import {
  store
} from './js/store/store';

// render the {React.Component}
ReactDOM.render( <
  Provider store = {
    store
  } >
  <
  Router >
  <
  Shop / >
  <
  /Router> < /
  Provider > ,
  document.querySelector('#order-form')
);

Shop.jsx（连接部分）：

const stateMapper = ({
  isOpen,
  message,
  showOkBtn,
  showCancelBtn
}) => ({
  isOpen,
  message,
  showOkBtn,
  showCancelBtn
});
const dispatchMapper = dispatch => ({
  onSetModalOpen: options => dispatch(Action.openCampaignModal(options)),
  onSetModalClosed: () => dispatch(Action.closeCampaignModal())
});
export default connect(
  stateMapper,
  dispatchMapper
)(Shop);

helper.js：

export const createReducer = (initialState, handlers) => (state = initialState, action) => {
  // eslint-disable-next-line
  if (action.type in handlers) {
    return handlers[action.type](state, action);
  }
  return state;
};

export const multiUse = (reducer, name = '') => (state = null, action) => {
  if (action.name !== name) return state;

  return reducer(state, action);
};

动作.js：

export const OPEN_CAMPAIGN_MODAL = 'OPEN_CAMPAIGN_MODAL';
export const CLOSE_CAMPAIGN_MODAL = 'CLOSE_CAMPAIGN_MODAL';
export const SET_CAMPAIGN = 'SET_CAMPAIGN';

export const openCampaignModal = ({
  message,
  showOkBtn,
  showCancelBtn
}) => ({
  type: OPEN_CAMPAIGN_MODAL,
  modal: {
    isOpen: true,
    message,
    showOkBtn,
    showCancelBtn
  }
});

export const closeCampaignModal = () => ({
  type: CLOSE_CAMPAIGN_MODAL,
  modal: {
    isOpen: false
  }
});

export const setCampaign = name => ({
  type: SET_CAMPAIGN,
  selected: name
});

减速器.js：

import {
  createReducer
} from '../helper';
import * as Action from './actions';

export default createReducer({
  modal: {
    isOpen: false,
    message: null,
    showOkBtn: true,
    showCancelBtn: false
  },
  selected: ''
}, {
  [Action.OPEN_CAMPAIGN_MODAL]: (state, {
      isOpen,
      message,
      showOkBtn,
      showCancelBtn
    }) =>
    Object.assign({}, state, {
      modal: {
        isOpen,
        message,
        showOkBtn,
        showCancelBtn
      }
    }),
  [Action.CLOSE_CAMPAIGN_MODAL]: (state, {
      isOpen
    }) =>
    Object.assign({}, state, {
      modal: {
        isOpen
      }
    }),
  [Action.SET_CAMPAIGN]: (state, action) =>
    Object.assign({}, state, {
      selected: action.selected
    })
});

这里有什么问题？我做了很多调试，chrome 中的 redux-dev-tools 似乎也显示了一个初始化的 redux 状态（尽管我看不到任何状态）。

标签： javascriptreactjsredux

解决方案

您export default在 store.js 中，但随后您使用了命名导入：

import {
  store
} from './js/store/store';

改成这样：

import store from './js/store/store';

推荐阅读