React Redux状态异常：Dashboard组件无法响应showEdit状态切换

让我帮你一步步排查并解决这些问题，你的代码里有几个关键的错误点，咱们逐个修复：

1. Reducer直接修改原state（违反Redux不可变原则） #

你的MessageReducer.js里直接修改了initState对象，这会导致Redux无法检测到状态变化——因为Redux依赖状态的不可变性来判断是否需要更新组件。你不能直接修改原state，必须返回一个新的状态副本。

修改后的MessageReducer.js：

const initState = { showEdit: false }; 
const messageReducer = (state = initState, action) => { 
  switch (action.type) { 
    case 'EDIT_MESSAGE': 
      // 用扩展运算符复制原state，再修改showEdit的值，返回新对象
      return {
        ...state,
        showEdit: !state.showEdit
      };
    default: 
      return state; 
  } 
} 
export default messageReducer;

这样Redux就能正确识别状态变化，进而通知关联的组件更新。

2. Dashboard组件无需维护本地state，直接使用props即可 #

你在Dashboard里把props.message.showEdit存在本地state里，这会导致props更新时，本地state不会自动同步——因为组件的state只会在初始化时赋值一次。而你之前尝试在render里调用setState，这直接触发了无限循环：render调用setState→组件重新渲染→再次调用setState→无限重复，这就是你看到"Maximum update depth exceeded"错误的根源。

修改后的Dashboard.js：

// 导入所需组件和connect
import React, { Component } from 'react';
import { connect } from 'react-redux';
import EditMessage from './EditMessage';
import CreateMessage from './CreateMessage';

class Dashboard extends Component { 
  render() { 
    const { message } = this.props; 
    // 直接用props中的showEdit值判断渲染哪个组件
    const showTypeForm = message.showEdit ? <EditMessage /> : <CreateMessage />; 
    return ( 
      <div className="message-form"> 
        {showTypeForm} 
      </div> 
    ) 
  } 
}

const mapStateToProps = (state) => { 
  return { 
    message: state.message 
  } 
} 

export default connect(mapStateToProps)(Dashboard);

现在，当Redux的state更新时，connect会自动把最新的props传递给Dashboard组件，组件会重新渲染并显示正确的表单。

3. 确认Action的导入正确 #

最后检查一下MessageSummary.js是否正确导入了editMessage action，确保顶部有：

import { editMessage } from './MessageActions';

完成这些修改后，点击Edit按钮时，Redux状态会切换showEdit的值，Dashboard会自动感知到props的变化，切换显示EditMessage或CreateMessage组件，而且不会再出现无限循环的错误。

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