使用react-loadable后Redux状态未初始化，props无法获取状态值

看起来你遇到的核心问题是异步加载的组件无法获取Redux注入的props，导致this.props.auth为undefined进而触发报错。结合你的代码和依赖版本，我整理了几个关键排查点和修复方案：

1. 确认异步组件已正确通过connect连接Redux #

这是最常见的原因：如果你的Login组件默认导出的是未经过connect包装的原始组件，那它自然无法获取Redux状态。

检查Login.js的导出部分，确保是类似这样的结构：

import { connect } from 'react-redux';

class Login extends React.Component {
  // 组件逻辑
  render() {
    // 使用this.props.auth.error
    return (
      {this.props.auth.error && <div className="c-alert c-alert--warning alert fade show">...</div>}
    )
  }
}

// 必须正确映射state到props，要和你的reducer结构对应
const mapStateToProps = (state) => ({
  auth: state.auth
});

// 默认导出经过connect包装的组件
export default connect(mapStateToProps)(Login);

2. 升级react-redux版本以适配React 16 #

你的依赖中react-redux是4.4.9，这个版本是为React 15设计的，而你使用的是React 16.0.0。React 16对Context API做了改动，旧版本的react-redux可能无法在异步加载组件时正确传递store上下文。

建议升级react-redux到兼容React 16的版本（比如^5.0.7，这个版本和你现有的react-router-redux 4.0.8兼容性较好）：

npm install react-redux@^5.0.7 --save

3. 简化React-Loadable的配置（移除自定义render） #

你的Loadable配置中自定义了render方法，但它的逻辑和默认行为完全一致，没必要额外定义。可以简化为：

const Login = Loadable({
  loader: () => import(/* webpackChunkName: "Login" */ './Login'),
  loading: () => <div>Loading...</div>,
});

自定义render有时会意外丢失上下文传递，简化后能避免这类问题。

4. 修复Redux热替换的reducer导入问题 #

在configureStore.js的热替换部分，你导入reducer的方式可能有问题：

// 当前代码
const nextRootReducer = require('../reducers/index');

如果你的../reducers/index.js是默认导出的combineReducers结果，应该改为：

const nextRootReducer = require('../reducers').default;

错误的reducer替换会导致store状态异常，甚至丢失。

5. 验证Redux Persist的初始化时机 #

虽然控制台显示store初始化完成，但redux-persist的持久化恢复可能还没完成就渲染了组件。可以修改PersistGate的加载提示，确保持久化完成后再渲染业务组件：

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

如果组件在持久化完成前渲染，可能会获取到初始空状态，但你的报错是auth直接为undefined，这个可能性稍低，但可以作为排查点。

按照以上步骤逐一排查，应该能解决this.props.auth为undefined的问题。

内容的提问来源于stack exchange，提问作者Kamil Kwiecien