Redux: Должен ли я очистить состояние при размонтировании - PullRequest
Новая
       9

Redux: Должен ли я очистить состояние при размонтировании

1 голос
/ 28 марта 2019

Наличие странной ошибки / проблемы с избыточностью. У меня есть компонент в приложении, которое отображает данные в таблице. эта таблица используется для многочисленных маршрутов, и я передаю URL для конечной точки.

Когда я нажимаю между маршрутами, они работают нормально, но в некоторых полях таблицы есть кнопка, чтобы открыть выдвижное меню. когда я делаю, действия излишка отправляются, и он запускает его для всех маршрутов, на которых я был, а не того, на котором я нахожусь.

Действие 

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

1008 * Переходник * 

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 / truck. если бы я был на обеих этих страницах, их уволили. я должен делать что-то для размонтирования и сброса состояния на пустое?

изменить, чтобы добавить визуализацию 

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

    );

1 Ответ

1 голос
/ 28 марта 2019

Основная идея состоит в том, чтобы определить новый тип действия в файле редуктора, чтобы очистить данные таблицы, и перед размонтированием отправьте это действие.

В компоненте: 

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