How to update the redux state using local state in a component

Question

I have a form in APP.js. upon submitting the form i need to display the data what i have entered in the form.In the reducer function , after dispatching the action in App.js i am trying to update the redux state . I have gone wrong here and stucked more than 2hrs. can anyone please help??

//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()
   /*
   const firstname=this.state.details.FirstName
   const lastname=this.state.details.LastName
   const age=this.state.details.Age
   */
   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>
  );
}
}

//my action

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

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

}

//my 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

i can see what ever the values entered through action.payload but failed to update the state

Answer 1

return [...state,{firstname: action.payload.FirstName,lastname:action.payload.LastName,age:action.payload.Age}];

You are returning an array make it object.

return {
        ...state,
        firstname: action.payload.FirstName,
        lastname: action.payload.LastName,
age:action.payload.Age
      };