0

我已经开始使用 react-loadable 拆分代码，在我想使用 this.props 之前一切都很好。深入挖掘我发现 redux 状态是空的，就像根本没有调用 createStore 一样。createStore 中的控制台日志显示它已启动并且存储对象已正确传递。不知何故，它没有得到它在更改为 react-loadable 之前的减速器状态。

结果我遇到了很多错误，例如：

Uncaught TypeError: Cannot read property 'error' of undefined

上

{this.props.auth.error && <div className="c-alert c-alert--warning alert fade show">

根.js

const Login = Loadable({
  loader: () => import(/* webpackChunkName: "Login" */ './Login'),
  loading: () => <div>Loading...</div>,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props}/>
  }
});

index.js：

import configureStore from "./store/configureStore";
const {store, persistor} = configureStore();

import { PersistGate } from 'redux-persist/integration/react'

ReactDom.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Root store={store} />
      </PersistGate>
    </Provider>  
  ,
  document.getElementById('wrapperContainer')
);

configureStore.js

import { createStore, applyMiddleware, combineReducers, compose }     from 'redux';
import thunkMiddleware from 'redux-thunk';
import { routerReducer } from 'react-router-redux'

import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to     localStorage for web and AsyncStorage for react-native

const persistConfig = {
  key: 'root',
  storage,
}

// create reducer from outlets, custom reducers and our router
const reducer = combineReducers({...reducers, routing:routerReducer});
const persistedReducer = persistReducer(persistConfig, reducer);

// create the store with thunk and promise middleware
const createStoreWithMiddleware = applyMiddleware(
  thunkMiddleware,
  promiseMiddleware
)(createStore);

/**
 * Creates a preconfigured store
 */
export default function configureStore(initialState) {
    const store =  createStoreWithMiddleware(
                  persistedReducer, 
                  initialState, 
                  window.devToolsExtension && window.devToolsExtension()
                );
  var persistor = persistStore(store);
    if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }
    return { store, persistor };
}

包.json

    "dependencies": {
        "axios": "^0.5.4",
        "babel-polyfill": "^6.9.1",
        "history": "^4.7.2",
        "i": "^0.3.6",
        "install": "^0.11.0",
        "moment": "^2.13.0",
        "npm": "^5.8.0",
        "prop-types": "^15.6.1",
        "react": "^16.0.0",
        "react-addons-pure-render-mixin": "^15.2.0",
        "react-addons-shallow-compare": "^15.2.1",
        "react-addons-update": "^15.1.0",
        "react-autosuggest": "^9.3.4",
        "react-calendar-timeline": "^0.16.1",
        "react-chartist": "^0.10.2",
        "react-color": "^2.14.1",
        "react-datepicker": "^1.4.1",
        "react-dom": "^16.0.0",
        "react-loadable": "^5.4.0",
        "react-redux": "^4.4.9",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-router-redux": "^4.0.8",
        "react-select": "^1.2.1",
        "react-smooth-dnd": "^0.3.7",
        "react-sortable": "^2.0.0",
        "react-toggle": "^4.0.2",
        "redux": "^3.7.2",
        "redux-logger": "^2.6.1",
        "redux-persist": "^5.9.1",
        "redux-thunk": "^2.1.0"
      },
      "devDependencies": {
        "babel": "^6.5.2",
        "babel-cli": "^6.9.0",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-plugin-transform-runtime": "^6.9.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "css-loader": "^0.23.1",
        "grunt": "^0.4.5",
        "grunt-contrib-cssmin": "^1.0.1",
        "grunt-contrib-less": "^1.2.0",
        "grunt-contrib-watch": "^0.6.1",
        "react-hot-loader": "^3.0.0",
        "s3-upload": "^0.1.0",
        "style-loader": "^0.13.1",
        "uglifyjs-webpack-plugin": "^1.2.5",
        "webpack": "^2.6.1",
        "webpack-dev-server": "^1.9.0"
      }
4

0 回答 0