能否在Redux中存储组件？存储MessageDialog后页面报错求解决

你遇到的Invariant Violation错误，核心原因是Redux的状态中不应该存储已经实例化的React元素（也就是<MessageDialog />这种JSX编译后的对象）。

为什么不能这么做？ #

Redux的设计初衷是存储可序列化的纯数据（比如字符串、数字、普通对象、数组），而<MessageDialog />本质是React.createElement返回的一个对象（包含type、props等属性），属于UI实例范畴，既不可序列化，也不符合Redux状态的职责定位。当你在其他页面尝试从Redux取出这个对象并当作组件渲染时，React期望拿到的是组件类/函数或内置组件名称，结果拿到的是一个普通对象，自然抛出类型错误。

正确的实现方式 #

我们可以把组件的引用（而非实例）和控制组件的配置数据分开处理，或者更简单地直接在需要的页面导入组件，Redux只存状态配置：

方案1：Redux存储组件引用+配置（适合需要全局复用组件引用的场景）

修改你的index.js初始状态，只存组件本身和配置数据：

import { MessageDialog } from 'miot/ui';

// 初始状态：存组件类/函数，而非实例化的元素
let initialState = {
  MessageDialogComponent: MessageDialog,
  messageDialogOptions: {
    title: '我是标题',
    message: '我是内容',
    cancel: '取消',
    confirm: '确认',
    cancelable: false,
    visible: true
  }
};

let store = createStore(reducers, initialState);

然后在需要使用的页面组件中，从Redux取出组件和配置并渲染：

import { connect } from 'react-redux';

class TargetPage extends React.Component {
  render() {
    const { MessageDialogComponent, messageDialogOptions } = this.props;
    return (
      <div>
        {/* 使用组件引用，传入配置props */}
        <MessageDialogComponent {...messageDialogOptions} />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  MessageDialogComponent: state.MessageDialogComponent,
  messageDialogOptions: state.messageDialogOptions
});

export default connect(mapStateToProps)(TargetPage);

方案2：直接导入组件，Redux仅存配置（更推荐，符合常规实践）

其实组件本身不需要存在Redux中，直接在需要的页面导入即可，Redux只负责存储控制组件显示的状态：

在目标页面中：

import { MessageDialog } from 'miot/ui';
import { connect } from 'react-redux';

class TargetPage extends React.Component {
  render() {
    const { messageDialogOptions } = this.props;
    return (
      <div>
        <MessageDialog {...messageDialogOptions} />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  messageDialogOptions: state.messageDialogOptions
});

export default connect(mapStateToProps)(TargetPage);

对应的index.js初始状态只保留配置：

let initialState = {
  messageDialogOptions: {
    title: '我是标题',
    message: '我是内容',
    cancel: '取消',
    confirm: '确认',
    cancelable: false,
    visible: true
  }
};

let store = createStore(reducers, initialState);

这种方式更简洁，也完全符合Redux"状态存储业务数据"的设计原则，是日常开发中更常用的做法。

内容的提问来源于stack exchange，提问作者Y.Li