Modifying redux store state through component does not work properly - redux

Question

in componentWillMount() of Table.js triggers action to redux store called 'DUPLICATE_DATA', which should copy contacts data in the redux store and duplicate the data to newcontacts in redux store. Then it should return modified redux state to the Table.js component. This does not work properly because the console shows following result:
console showing the result when code is run
The console shows that the action is triggered throguh Table.js component.
The console shows that modified state (duplicating contacts to newcontacts) worked inside of redux store.
However, the console shows that the state is not actually modified when passed onto Table.js component as newcontacts is an empty array in the console. and this is where I am confused. newcontact should have exact same content as contact but it doesn't. Why?? Help!!
Here is the source code: https://github.com/dyl4810/dynamicDataTable
And here is the deployed app in action: https://dyl4810.github.io/dynamicDataTable/
Table.js:
import React from "react";
import "../../styles/App.css";
import { connect } from "react-redux";
import Search from './Search';
import UpDownArrow from './UpDownArrow';
import {sortByField, duplicateData} from '../../actions/postActions'
class Table extends React.Component {
constructor(props){
super(props);
this.onArrowClick =this.onArrowClick.bind(this)
}
componentWillMount(){
this.props.duplicateData(this.props.dataName)
console.log('Redux state passed onto Table component after completion of duplicateData action:')
console.log(this.props.duplicatedData)
}
createDataRows(){
console.log('creating data rows')
let renderedRows = [];
let data = this.props.data;
let fieldKeys = Object.keys(data[0]);
for(let i=0; i <= data.length -1; i++){
let tds =[]
for(let j=0; j <= fieldKeys.length -1; j++){
tds.push(<td className ='tableCell' key={j}>{data[i][fieldKeys[j]]}</td>)
}
renderedRows.push(<tr key = {i}>{tds}</tr>)
}
return renderedRows;
}
createDataHeader(){
console.log('creating data header')
let headers = Object.values(this.props.headerObj[0]);
let headerKeys = Object.keys(this.props.headerObj[0]);
let ths =[];
for(let i =0; i<= headers.length-1; i++){
ths.push(
<th className='tableCell' key = {i}>
{headers[i]}
<UpDownArrow
onArrowClick = {this.onArrowClick}
ref={(fieldArrow)=>this[headerKeys[i] + 'Arrow'] = fieldArrow}
id= {headerKeys[i]}
/>
</th>
)
}
return ths;
}
onArrowClick(headerKeyActive){
Object.keys(this.props.headerObj[0]).forEach(headerKey =>{
if(headerKey !== headerKeyActive){
this[headerKey + 'Arrow'].defaultDownArrow()
}
})
this.props.sortByField(headerKeyActive, this.props.dataName)
}
render() {
return (
<div>
<Search headerNames = {this.props.headerNames}/>
<table>
<thead>
<tr>
{this.createDataHeader()}
</tr>
</thead>
<tbody>
{this.createDataRows()}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps = (state, props) => {
return {
headerObj: state[props.headerNames],
data: state[props.dataName],
duplicatedData: state['new' + props.dataName]
};
};
const mapDispatchToProps = (dispatch) =>{
return {
sortByField: (headerKeyActive, dataName) => dispatch(sortByField(headerKeyActive, dataName)),
duplicateData: (dataName) => dispatch(duplicateData(dataName))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Table)
redux store:
const initState = {
treeData: [
{
id: 1,
name: "Contacts",
children: []
}
],
treeDepth: 0,
contacts: [
{
id: 1,
company: "Rapid Precision Mfg.",
title: "Quality Engineer",
firstName: "Dongyob",
lastName: "Lee",
officePh: "",
ext: "",
cell: "669-294-0910",
email: "dyl4810#gmail.com"
}
],
contactsKeyNames: [
{
id: "ID",
company: "Company",
title: "Title",
firstName: "First Name",
lastName: "Last Name",
officePh: "Office",
ext: "Ext",
cell: "Cell",
email: "Email"
}
],
newcontacts: []
};
const rootReducer = (state = initState, action) => {
switch(action.type){
case 'SORT_BY_FIELD':
break;
case 'DUPLICATE_DATA':
let newState = state;
newState.newcontacts = newState.contacts;
state = newState;
console.log('modified redux state inside of redux action DUPLICATE_DATA:')
console.log(state.newcontacts)
return state;
default:
return state;
}
return state;
};
export default rootReducer;