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

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
};