How to display the updated state in the redux store - redux

Question

I am new to redux. I have a form which i need to print the data entered in the form. I am updating the redux state through the local state,but unable to display the state variables through mapStateToProps method.
Thanks in advance
//Form component in App.js File
import React,{Component} from 'react';
import {action1} from './Actions/action1'
import './App.css';
import {connect} from 'react-redux'
import Display from './Components/Displaylist'
const mapDispatchToProps=(dispatch)=>{
return{
submitHandler:(details)=>dispatch(action1(details))
}
}
class App extends Component {
state={
FirstName:'',
LastName:'',
Age: ''
}
nameHandler=(event)=>{
this.setState({[event.target.name]:event.target.value});
}
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)
}
render(){
return (
<div className="App">
<form onSubmit={this.SubmitHandler}>
<div className="form-group">
<input
type="text"
placeholder="FirstName"
value={this.state.FirstName}
onChange={this.nameHandler}
className="form-control"
name="FirstName"
/>
</div>
<div className="form-group">
<input
type="text"
placeholder="LastName"
value={this.state.LastName}
onChange={this.nameHandler}
className="form-control"
name="LastName"
/>
</div>
<div className="form-group">
<input
type="text"
placeholder="Age"
value={this.state.Age}
onChange={this.nameHandler}
className="form-control"
name="Age"
/>
</div>
<div className="form-group">
<button type="submit" >Submit Form</button>
</div>
</form>
<Display/>
</div>
);
}
}
export default connect(null,mapDispatchToProps) (App);
//action component
import {SUBMISSION} from '../Constants/actiontypes'
import uuidv4 from 'uuid/v4'
export const action1=(body)=>{
console.log(body)
return{
type:SUBMISSION,
payload:{
id:uuidv4(),
body
}
}
}
//reducer component -->I am using combined reducer even i have only one action
import {SUBMISSION} from '../Constants/actiontypes'
const reducer1=(state=[],action)=>{
if(action.type===SUBMISSION){
return [...state, action.payload];
}
return state
}
export default reducer1
//combine reducer file
import {combineReducers} from 'redux'
import Reducer1 from './reducer1'
const allreducers=combineReducers({details:Reducer1})
export default allreducers
//Display file template
const Display=({details:{firstname,lastname,age}})=>{
return(
<div >
<h1>Firstname:{firstname}</h1>
<h1>LastName:{lastname}</h1>
<h1>Age:{age}</h1>
</div>
)
}
export default Display
//DisplayList file--> I have imported the Display.js (above) file in this.And passing values through this file. Finally i imported this in my App.js file
import React from 'react'
import {connect} from 'react-redux'
import Display from './Display'
const mapStateToProps=(state)=>{
return{
details:state.details
}
}
const List=({details})=>{
console.log(details)
return(
<div>
{details.map(de=>{
console.log(de)
return (
<Display details={de} key ={de.id}/>
)
})}
</div>
)
}
export default connect(mapStateToProps,null)(List)
I am unable to display the value that i have entered .
I am getting FirstName :
LastName:
Age:
but not their corresponding values.

Answer 1

you almost got it! The issue is with what you are passing to the Display component and how you are destructuring the props. Make these changes and it should work.
In the DisplayList Component, change
<Display details={de} key={de.id}/>
to
<Display details={de.body} key={de.id} />
In the Display Component, change
const Display=({details:{firstname,lastname,age}})
to
const Display = ({ details: { FirstName: firstname, LastName: lastname, Age: age }})
Here is a codesandbox example for your referrence:
https://codesandbox.io/s/reactredux-obsht
Let me know if you need any help.

Answer 2

I think the issue is with your initial state in reducer,
const reducer1=(state=[],action)=>{ ... }
In React we have state object, but you initialized an array like state=[].
You need to create an initial state object separately like,
const initialState = {
details : [] //name it as `details`, because you are getting `state.details` in `DisplayList` component
}
Now you can update and return your state as,
const reducer1=(state=initialState, action)=>{
if(action.type===SUBMISSION){
return {...state, details: [...state.details, action.payload] };
}
return state
}