State doesnt get reset on route change - React-redux-router

Question

Hi I am creating a Server side react app. I have multiple routes using the same components and reducers. One specific reducer is an ItemsPerPage dropdown. I am getting the value from the reducer and passing it as a payload to a post request to a database to fetch that many results.

In one page, I get 50 results, and when I navigate to the other page using the same reducer, the state value should be 10 but rather its 50. How do I reset the state when going to another page?

I am using { LOCATION_CHANGE } from 'react-router-redux'

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

Main page using this component:

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

If you can see in the images below, I navigate between the routes and state still remains same instead of taking initial state.

Answer 1

Add a case for LOCATION_CHANGE to your ItemsPerPageReducer to reset the count when the location changes:

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

If you only want it to reset on certain location changes, you can check action.payload to test if it is a route you actually want to reset on.