Reactjs 我应该在卸载时清除状态吗

redux有一个奇怪的错误/问题。我在应用程序中有一个组件，可以在表中显示数据。这个表在许多路由中使用，我正在为端点传递一个url

当我在路由之间单击时，它们工作正常，但表中的某些字段有一个按钮打开滑出菜单。当我执行redux操作时，它会对我去过的所有路线（而不是我所在的路线）发出redux操作

行动

export const clearTableData = () =>  dispatch => {
  dispatch({
    type: TYPES.CLEAR_TABLE_DATA,
  });
};

export const getTableData = (url, limit, skip, where, sort, current) => async dispatch => {
  try {
    dispatch({ type: TYPES.FETCH_TABLE_DATA_LOADING });
    const response = await axios.post(url, {
      limit,
      skip,
      where,
      sort
    });
    await dispatch({
      type: TYPES.FETCH_TABLE_DATA,
      payload: {
        url: url,
        data: response.data,
        limit: limit,
        skip: skip,
        where: where,
        sort: sort,
        pagination: {
          total: response.data.meta.total,
          current: current,
          pageSizeOptions: ["10", "20", "50", "100"],
          showSizeChanger: true,
          showQuickJumper: true,
          position: "both"
        }
      }
    });
    dispatch({ type: TYPES.FETCH_TABLE_DATA_FINISHED });
  } catch (err) {
    dispatch({ type: TYPES.INSERT_ERROR, payload: err.response });
  }
};

减速器

import * as TYPES from '../actions/types';

export default (state = { loading: true, data: [], pagination: [] }, action) => {
  switch (action.type) {
    case TYPES.FETCH_TABLE_DATA:
      return { ...state, ...action.payload };
    case TYPES.FETCH_TABLE_DATA_LOADING:
      return { ...state, loading: true };
    case TYPES.FETCH_TABLE_DATA_FINISHED:
      return { ...state, loading: false };
    case TYPES.CLEAR_TABLE_DATA:
      return {};
    default:
      return state;
  }
};

组成部分

    componentDidMount() {
    this.fetch();
    websocket(this.props.websocketRoute, this.props.websocketEvent, this.fetch);
  }

      fetch =  () => {
        // Fetch from redux store
       this.props.getTableData(
          this.props.apiUrl,
          this.state.limit,
          this.state.skip,
          { ...this.filters, ...this.props.defaultWhere },
          `${this.state.sortField} ${this.state.sortOrder}`,
          this.state.current)
      }

    const mapStateToProps = ({ tableData }) => ({
      tableData,
    });

    const mapDispatchToProps = dispatch => (
      bindActionCreators({ getTableData }, dispatch)
    )

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(SearchableTable);

网袋

import socketIOClient from 'socket.io-client';
import sailsIOClient from 'sails.io.js';

export const websocket = (websocketRoute, websocketEvent, callback) => {
  if (websocketRoute) {
    let io;

    if (socketIOClient.sails) {
      io = socketIOClient;
    } else {
      io = sailsIOClient(socketIOClient);
    }

    io.sails.transports = ['websocket'];
    io.sails.reconnection = true;

    io.sails.url = process.env.REACT_APP_WEBSOCKECTS_URL

    io.socket.on('connect', () => {
      io.socket.get(websocketRoute, (data, jwres) => {
        console.log("connect data sss", data)
        console.log("connect jwres sss", jwres)
      });
    });

    io.socket.on(websocketEvent, (data, jwres) => {
      console.log("websocket", callback)
      callback();
    })

    io.socket.on('disconnect', () => {
      io.socket._raw.io._reconnection = true;
    });
  }
}

例如，如果我在一条汽车路线上，我会将api/cars作为url传递，对于卡车api/cars。如果这两页我都看过，他们就会被炒鱿鱼。 我应该卸载并将状态重置为空白吗

编辑以添加渲染

render() {
    const { filters, columns, expandedRowRender, rowClassName, style } = this.props;


    return (
              <Table
                bordered
                columns={columns}
                rowKey={record => record.id}
                dataSource={this.props.tableData.data.items}
                pagination={this.props.tableData.pagination}
                loading={this.props.tableData.loading}
                onChange={this.handleTableChange}
                expandedRowRender={expandedRowRender}
                rowClassName={rowClassName} />

    );

render（）{
const{filters，columns，expandedRowRender，rowClassName，style}=this.props；
返回(
record.id}
dataSource={this.props.tableData.data.items}
分页={this.props.tableData.pagination}
loading={this.props.tableData.loading}
onChange={this.handleTableChange}
expandedRowRender={expandedRowRender}
rowClassName={rowClassName}/>
);

基本思想是，在reducer文件中定义一个新的操作类型以清除表数据，然后在卸载之前分派该操作

在组件中：

componentDidMount() {
  this.fetch();
}

componentWillUnmount() {
  this.props.clearTableData();
}

const mapDispatchToProps = dispatch => (
  bindActionCreators({ getTableData, clearTableData }, dispatch)
)

行动：

export const clearTableData = () => {
  return { type: TYPES.CLEAR_TABLE_DATA };
};

减速器：

case TYPES.CLEAR_TABLE_DATA: {
  // reset the table data here, and return
}

---

这将是一个选项，在卸载组件时或在安装新组件之前清除减速机。您能否演示一个如何执行此操作的示例@Mayankshukla刚刚尝试了类似的操作，但没有解决问题，我可以在redux dev tools中看到它正在清除，但当我单击一个按钮打开滑出部分时，它会显示以前的路由数据。这可能与路由器历史记录有关吗？不，您能说明如何在表中呈现数据吗，我的意思是，您直接使用道具数据，或者将道具数据存储在状态中，然后使用它？在您返回的reducer中？我更新了我的问题，以显示clear action及其reducer。我更新了问题，因为它似乎是WebSocket导致了问题，知道为什么吗？