React组件中通过本地状态更新Redux状态失败求助

我在React的App.js里写了一个表单，提交后想展示输入的数据。派发action后，能在action里看到payload的输入值，但reducer里更新Redux状态的操作失败，已经卡了2小时了。下面是我的相关代码，恳请帮忙排查！

相关代码 #

App.js

import React,{Component} from 'react';
import {action1} from './Actions/action1'
import './App.css';
import {connect} from 'react-redux'
import Display from './Components/Display'

const mapDispatchToProps=(dispatch)=>{
  return{
    submitHandler:(details)=>dispatch(action1(details))
  }
}

class App extends Component {
  constructor(){
    super();
    this.state={
      details: {FirstName:'', LastName:'', Age: ''}
    }
  }

  nameHandler=(event)=>{
    const details = this.state.details;
    details[event.target.name]= event.target.value;
    this.setState({details});
  }

  SubmitHandler=(event)=>{
    event.preventDefault()
    this.props.submitHandler(this.state.details)
  }

  render(){
    return (
      <div className="App">
        <form onSubmit={this.SubmitHandler}>
          <div className="form-group">
            <input type="text" placeholder="FirstName" value={this.state.details.FirstName} onChange={this.nameHandler} className="form-control" name="FirstName" />
          </div>
          <div className="form-group">
            <input type="text" placeholder="LastName" value={this.state.details.LastName} onChange={this.nameHandler} className="form-control" name="LastName" />
          </div>
          <div className="form-group">
            <input type="text" placeholder="Age" value={this.state.details.Age} onChange={this.nameHandler} className="form-control" name="Age" />
          </div>
          <div className="form-group">
            <button type="submit" className="btn btn-primary">Submit Form</button>
          </div>
        </form>
        <Display/>
      </div>
    );
  }
}

Action文件（./Actions/action1.js）

import {SUBMISSION} from '../Constants/actiontypes'

export const action1=(body)=>{
  console.log(body)
  return{
    type:SUBMISSION,
    payload:body
  }
}

Reducer文件

import {SUBMISSION} from '../Constants/actiontypes'

const reducer1=(state=[],action)=>{
  if(action.type===SUBMISSION){
    return [...state,{firstname: action.payload.FirstName,lastname:action.payload.LastName,age:action.payload.Age}];
  }
  return state
}

export default reducer1

问题排查与修复方案 #

我看了你的代码，发现几个关键问题，应该就是导致状态不更新的原因：

1. App组件未正确连接Redux Store
   你定义了mapDispatchToProps，但最后没有导出被connect包装后的组件！这会导致this.props.submitHandler根本没被注入到组件里，派发action的操作实际没和store关联起来。
   修复：在App.js末尾添加：

   export default connect(null, mapDispatchToProps)(App)
   

2. Reducer未注册到Store中
   你需要确保reducer1被合并到根reducer，并且创建Store时使用了这个根reducer。举个例子：

   // store.js示例
   import { createStore, combineReducers } from 'redux';
   import reducer1 from './Reducers/reducer1';
   
   const rootReducer = combineReducers({
     formData: reducer1 // 给你的reducer设置一个唯一key，比如formData
   });
   
   const store = createStore(rootReducer);
   
   export default store;
   

3. Display组件未连接Store获取状态
   你的Display组件要展示数据，必须通过connect从store中读取状态。示例代码如下：

   // Display.js
   import React from 'react';
   import { connect } from 'react-redux';
   
   const Display = ({ formData }) => {
     return (
       <div>
         {formData.map((item, index) => (
           <div key={index}>
             <p>First Name: {item.firstname}</p>
             <p>Last Name: {item.lastname}</p>
             <p>Age: {item.age}</p>
           </div>
         ))}
       </div>
     );
   };
   
   const mapStateToProps = (state) => {
     return {
       formData: state.formData // 这里的key要和store中注册的reducer key一致
     };
   };
   
   export default connect(mapStateToProps)(Display);
   

4. 检查Action Type的拼写一致性
   确认Constants/actiontypes里的SUBMISSION拼写和action、reducer里的完全一致，拼写错误会导致reducer无法匹配action类型。

验证步骤 #

修复后，你可以：

• 打开Redux DevTools（如果使用），提交表单时查看是否有SUBMISSION类型的action被触发，以及store状态是否更新。
• 检查控制台是否有报错，比如connect使用不当导致的错误。

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