Изменение состояния избыточного хранилища через компонент не работает должным образом

Question

в componentWillMount () в Table.js запускает действие в хранилище с избыточностью, называемое «DUPLICATE_DATA», которое должно скопировать контакты данных в хранилище с избыточностью и дублировать данные в новые контакты в избыточности хранить. Затем он должен вернуть измененное избыточное состояние компоненту Table.js. Это не работает должным образом, потому что консоль показывает следующий результат: консоль, показывающая результат при выполнении кода

• Консоль показывает, что действие запускается через компонент Table.js.
• Консоль показывает, что измененное состояние (дублирование контактов на новые контакты) работало внутри хранилища резервов.
• Однако консоль показывает, что состояние фактически не изменяется при передаче в компонент Table.js, поскольку newcontacts является пустым массивом в консоли. и это где я запутался. newcontact должен иметь точно такое же содержимое, что и contact, но это не так. Зачем?? Помогите !!

Вот исходный код: https://github.com/dyl4810/dynamicDataTable

А вот развернутое приложение в действии: 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)

магазин редуксов:

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;