Question

在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);

Websocket

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 /卡车中。如果我去过这两个页面，他们都会被解雇。我应该做些什么来卸载并将状态重置为空白吗？

编辑以添加渲染

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} />

    );

Answer 1

基本思想是，在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
}

Redux：我是否应清除卸载状态

1 个答案: