Question

您好我正在创建一个服务器端反应应用程序。我有多个路由使用相同的组件和reducer。一个特定的reducer是ItemsPerPage下拉列表。我从reducer获取值并将其作为有效负载传递给数据库的post请求以获取那么多结果。

在一个页面中，我获得了50个结果，当我使用相同的reducer导航到另一个页面时，状态值应为10，而不是50。如何在转到另一个页面时重置状态？

我正在使用来自＆＃39; react-router-redux＆＃39;

的{LOCATION_CHANGE}

routerReducer.js：

import { LOCATION_CHANGE } from 'react-router-redux';

const initialState = {
  location: '',
};

export const routeReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOCATION_CHANGE:
      return {
        ...state,
        ...action.payload,
      };
    default:
      return state;
  }
};

ItemsPerPageDropdown：

import React, {PropTypes, Component} from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';
import { changeItemsPerPage } from '../../actions/index';

class ItemsPerPage extends Component {

    handleChange = (event) => {
        this.props.changeItemsPerPage(event.target.value)
    };

    render() {

        const itemsPerPage = [10, 20, 50];

        return (
            <div  className={'table-item-count-container'}>
                <label className={'filter-label items-by-page-label'}>Items Per Page:</label>
                <select id="items-per-paghe"
                        className="form-control items-by-page-select"
                        onChange={this.handleChange}
                >
                    {_.map(itemsPerPage, (item, index) => <option key={index}>{item}</option>)}
                </select>
            </div>
        )
    }
}

export default connect(null, {changeItemsPerPage})(ItemsPerPage);

ItemsPerPageReducer：

import * as ACTION_TYPES from '../consts/action_types';


const initialState = {
  items: 10,
};
export const itemsPerPageReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPES.CHANGE_ITEMS_PER_PAGE:
      return {
        ...state,
        items: action.data,
      };
    default:
      return state;
  }
};

使用此组件的主页：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router'
import { bindActionCreators } from 'redux';
import _ from 'lodash';
import Moment from 'react-moment';
import Header from '../../components/Header/Header';
import DataTable from '../../components/DataTable/DataTable';
import InstructionList from '../../components/InstructionList/InstructionList';
import { getData, postData } from '../../actions';
import { columns } from './Report1Columns';
import * as instructions from '../../consts/instructionText';

class Report1 extends Component {
    params = {
        userId: this.props.corpId,
        filteredAppID: '',
        envClassification: '',
        Status: '',
        startRow: 0 + this.props.activePage, //1
        numRows: this.props.itemsPerPage,
        sortCol: 'application_name',
        sortDir: 'asc',
    };

    loadPage = () => {
        if(this.props.postData) {
            this.props.postData('https://localhost:3001/reports/report1/', this.params);
        }
    };
    componentDidMount = () => {
        this.props.postData('https://localhost:3001/reports/report1/', this.params);
    };

    componentWillReceiveProps = (nextProps) => {
        if (nextProps.itemsPerPage !== this.props.itemsPerPage) {
            this.params.numRows = nextProps.itemsPerPage;
            this.loadPage();
        }

        if(nextProps.activePage !== this.props.activePage) {
            this.params.startRow = ((nextProps.activePage - 1) * this.props.itemsPerPage) +1;
            this.loadPage();
        }

        if(nextProps.searchTerm !== this.props.searchTerm) {
            this.params.filteredAppID = nextProps.searchTerm;
            this.loadPage();
        }

        if(nextProps.envClassification !== this.props.envClassification) {
            this.params.envClassification = nextProps.envClassification === 'All' ? '' : nextProps.envClassification;
            this.loadPage();
        }

        if(nextProps.watchtowerStatus !== this.props.Status) {
            this.params.watchtowerStatus= nextProps.watchtowerStatus=== 'Manage & Analyze' ? '' : nextProps.watchtowerStatus;
            this.loadPage();
        }
    };

    render() {


       return (
            <div>
                <Header title={ 'Report 1' } />
                <InstructionList instructions={ instructions.Report1 } />
                {this.props.data &&
                <DataTable
                    keyField={ 'Report1' }
                    columns={ columns }
                    paginatedData={ this.props.data }
                    totalRows={ this.props.totalRows }
                    placeholder={ 'ID/NAME' }
                    showStatus={true}
                />}
            </div>
        );
    }
}

const mapStateToProps = state => ({
    /**
     * The date to be passed to the table
     */
    data: _.get(state.isFetchingPost, 'data.rows'),
    /**
     * Total Rows count of data
     */
    totalRows: state.isFetchingPost.data.total_rows,
    /**
     * Items Per Page
     */
    itemsPerPage: state.itemsPerPageReducer.items,
    /**
     * Item which is searched
     */
    searchTerm: state.searchReducer.searchTerm,
    /**
     * The current active page for pagination
     */
    activePage: state.changeActivePageReducer.activePage,
    /**
     * The value of the dropdown selected in Environment Classification
     */
    envClassification: state.envClassificationReducer.envClassification,
    /**
     * The value of the dropdown selected in Status
     */
    watchtowerStatus: state.watchTowerStatusReducer.watchTowerStatus
});

const mapDispatchToProps = dispatch => bindActionCreators({ getData, postData }, dispatch);
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Report1));

如果您可以在下面的图片中看到，我在路线之间导航，状态仍然保持不变，而不是采取初始状态。

Answer 1

为LOCATION_CHANGE添加ItemsPerPageReducer个案，以便在地理位置发生变化时重置计数：

import * as ACTION_TYPES from '../consts/action_types';
import { LOCATION_CHANGE } from 'react-router-redux';

const initialState = {
    items: 10,
};
export const itemsPerPageReducer = (state = initialState, action) => {
    switch (action.type) {
        case ACTION_TYPES.CHANGE_ITEMS_PER_PAGE:
            return {
                ...state,
                items: action.data,
            };
        case LOCATION_CHANGE:
            return {
                ...state,
                items: 10,
            };
        default:
            return state;
        }
    }
};

如果您只想让它重置某些位置更改，您可以检查action.payload以测试它是否是您实际想要重置的路线。

路由更改时状态不会重置 - React-redux-router

1 个答案: