通过组件修改redux存储状态无法正常工作

Question

Table.js的componentWillMount（）中的

触发了对名为'DUPLICATE_DATA'的Redux存储的操作，该操作应复制Redux存储中的联系人数据并将数据复制到 newcontacts 在redux商店中。然后，它应该将修改后的redux状态返回给Table.js组件。由于控制台显示以下结果，因此无法正常工作： console showing the result when code is run

• 控制台显示该动作是通过Table.js组件触发的。
• 控制台显示redux存储内部已修改状态（将联系人复制到新联系人）。
• 但是，控制台显示该状态在传递到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)

redux商店：

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;