Требуется повторно отображать строки таблицы при изменении состояния в редуксе

Я использовал избыточное действие для удаления первых строк таблицы при нажатии Good btn

Редуктор LineMange.js

const LineManage = (state = Initstate, action) => {
  switch (action.type) {
    case 'AddP':
      console.info(state.Products);
      return {};
    case 'RemP':
      state.data.splice(0, 1);
      console.info(state.data);
      return Object.assign({}, state, {
        data: state.data
      });
    default:
      console.info(state.data);
      return state;
  }
};

Панель.jsx

class Pannel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      Img:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/No_image_3x4.svg/1200px-No_image_3x4.svg.png', // default Value
      Sheet: {
        in_or: 0,
        Hr_plan: 0,
        Inactual: 0,
        NG: 0,
        DIFF: 0,
        T_plan: 0,
        T_Actual: 0,
        T_DIFF: 0,
        OEEE: 0,
        OA: 0,
        NG_T: 0,
        BAL: 0
      } // default value
    };
    const { RemP } = this.props;
    this.RemP = RemP.bind(this);
    this.handleScanner = this.handleScanner.bind(this);
    this.codevalue = '';
  }

  componentDidMount() {
    document.addEventListener('keypress', this.handleScanner);
  }

  shouldComponentUpdate(nextProps) {
    console.warn('update ' + nextProps);
    return true;
  }

  handleScanner(e) {
    if (e.keyCode === 13) {
      alert(this.codevalue);
    } else {
      this.codevalue += e.key;
    }
  }

  render() {
    console.warn('render');
    return (
      <>
        <Container fluid = "true">
          <Row>
            <Col>
              <Psheet />
            </Col>
          </Row>
          <Row style = {{ marginTop: '15px' }}>
            <Col lg = {6} md = {6}>
              <div className = "frame">
                <Container>
                  <h2 className = "Header">Sheet</h2>
                  <div className = "TableControl">
                    <Table striped bordered hover>
                      <thead>
                        <th className = "text-center p-0">Kaban No.</th>
                        <th className = "text-center p-0">Part No.</th>
                        <th className = "text-center p-0">Part Name</th>
                        <th className = "text-center p-0">Qty's per Kaban</th>
                        <th className = "text-center p-0">Status</th>
                      </thead>
                      <tbody>
                        {this.state.data.map((data, index) => {
                          const { Name, Unit, Status } = data.info;
                          return (
                            <tr value = {data.ID}>
                              <td>{index + 1}</td>
                              <td>{data.ID}</td>
                              <td>{Name}</td>
                              <td>{Unit}</td>
                              <td>{Status}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </Table>
                  </div>
                  <hr />
                  <Row>
                    <Col>
                      <Button
                        onClick = {this.RemP}
                        style = {{ marginRight: ' 20px' }}
                        variant = "success"
                        size = "lg"
                      >
                        Good
                      </Button>
                    </Col>
                    <Col>
                      <Button
                        style = {{ marginRight: ' 20px' }}
                        variant = "danger"
                        size = "lg"
                      >
                        No Good
                      </Button>
                    </Col>
                  </Row>
                  <hr />
                </Container>
              </div>
            </Col>
            <Col style = {{ marginTop: '20px' }} lg = {6} md = {6}>
              <div className = "frame">
                <Qp imgsr = {this.state.data[0].info.Img_src} />
              </div>
            </Col>
          </Row>
        </Container>
      </>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    RemP: () => dispatch(RemP())
  };
};

const mapStateToProps = function (state) {
  return {
    data: state.LineManage.data
  };
};

const Pan = connect(mapStateToProps, mapDispatchToProps)(Pannel);
export default Pan;

состояние в редуксе изменяется, но компонент не перерисовывается и даже не запускает shouldcomponentupdate(), даже если я пытался передать реквизиты непосредственно в render(), но другая страница, которая подсчитывает длину данных в редюсере работает нормально, поэтому, если я сделал что-то не так, пожалуйста, скажите мне, я действительно новичок в реакции-редукс