Обновление initialState

Подскажите, как при смене страницы возвращать initialState в исходное состояние ?

Проблема в том, что при использовании пагинации на страницах currentPage (Выбранная страница) не изменяется на исходную

Пример reducer

import {restaurantsAPI} from '../api/api';
const TOGGLE_IS_FETCHING = 'TOGGLE_IS_FETCHING';
const SET_RESTAURANTS = 'SET_RESTAURANTS';
const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
const SET_TOTAL_COUNT = 'SET_TOTAL_COUNT';
const SET_TOTAL_COUNT_ALL = 'SET_TOTAL_COUNT_ALL';
const SET_RESTAURANTSALL = 'SET_RESTAURANTSALL';
const TOGGLE_IS_SEARCH = 'TOGGLE_IS_SEARCH';
const SET_SEARCH_TEXT = 'SET_SEARCH_TEXT';
const SET_CHART_RESTAURANT = 'SET_CHART_RESTAURANT';

let initialState = {
    isFetching: false,
    restaurants:[],
    pageSize: 25,
    currentPage: 1,
    totalCount: 0,
    totalCountAll: 0,
    restaurantsAll:undefined,
    isSearch: false,
    searchText: undefined,
    chartRestaurant: '',
};

const restaurantsReducer = (state = initialState, action) => {
    switch(action.type){
        case TOGGLE_IS_FETCHING:
            return {...state, isFetching: action.isFetching}
        case SET_RESTAURANTS:
            return {...state, restaurants: action.restaurants}
        case SET_CURRENT_PAGE:
            return {...state, currentPage: action.currentPage}
        case SET_TOTAL_COUNT:
            return {...state, totalCount: action.totalCount}
        case SET_TOTAL_COUNT_ALL:
            return {...state, totalCountAll: action.totalCountAll}
        case SET_RESTAURANTSALL:
            return {...state, restaurantsAll: action.restaurantsAll}
        case TOGGLE_IS_SEARCH:
            return {...state, isSearch: action.isSearch}
        case SET_SEARCH_TEXT:
            return {...state, searchText: action.searchText}
        case SET_CHART_RESTAURANT:
            return {...state, chartRestaurant: action.chartRestaurant}
        default:
            return state;
    }
}

export const toggleIsFetching = (isFetching) => ({type: TOGGLE_IS_FETCHING, isFetching})
export const setRestaurants = (restaurants) => ({type: SET_RESTAURANTS, restaurants})
export const setCurrentPage = (currentPage) => ({type: SET_CURRENT_PAGE, currentPage})
export const setTotalCount = (totalCount) => ({type: SET_TOTAL_COUNT, totalCount})
export const setTotalCountAll = (totalCountAll) => ({type: SET_TOTAL_COUNT_ALL, totalCountAll})
export const setRestaurantsAll = (restaurantsAll) => ({type: SET_RESTAURANTSALL, restaurantsAll})
export const toggleIsSearch = (isSearch) => ({type: TOGGLE_IS_SEARCH, isSearch})
export const setSearchText = (searchText) => ({type: SET_SEARCH_TEXT, searchText})
export const setChartRestaurants = (chartRestaurant) => ({type: SET_CHART_RESTAURANT, chartRestaurant})

export const getRestaurants = (currentPage, pageSize) => {
    return(dispatch) =>{
        dispatch(toggleIsFetching(true));
        restaurantsAPI.getRestaurants(currentPage, pageSize).then(data => {
            if(data.resultCode === 0){
                dispatch(setRestaurants(data.restaurants));
                dispatch(setCurrentPage(currentPage));
                dispatch(setTotalCount(data.totalCount));
                dispatch(setTotalCountAll(data.totalCount));
                dispatch(toggleIsFetching(false));
            } else {

            }
        });
    }
}

export const getRestaurantsAll = () => {
    return(dispatch) =>{
        dispatch(toggleIsFetching(true));
        restaurantsAPI.getRestaurantsAll().then(data => {
            if(data.resultCode === 0){
                dispatch(setRestaurantsAll(data.restaurants));
                dispatch(toggleIsFetching(false));
            }
        });
    }
}

export const searchRestaurants = (searchText, currentPage, pageSize) => {
    return(dispatch) =>{
        dispatch(toggleIsFetching(true));
        restaurantsAPI.searchRestaurants(searchText, currentPage, pageSize).then(data => {
            if(data.resultCode === 0){
                dispatch(setRestaurants(data.restaurants));
                dispatch(setTotalCount(data.totalCount));
                dispatch(setCurrentPage(currentPage));
                dispatch(toggleIsSearch(true));
                dispatch(toggleIsFetching(false));
                dispatch(setSearchText(searchText));
            }
        });
    }
}

export const chartRestaurants = (id) => {
    return(dispatch) =>{
        dispatch(toggleIsFetching(true));
        restaurantsAPI.chartRestaurant(id).then(data => {
            if(data.resultCode === 0){
                dispatch(setChartRestaurants(data.chartRestaurant));
            }
        });
    }
}


export default restaurantsReducer;

Пример контейнерной компоненты

import {compose} from 'redux';
import Restaurants from './Restaurants';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {getRestaurants, setCurrentPage, searchRestaurants, getRestaurantsAll, chartRestaurants, setRestaurantsAll} from '../../../redux/restaurants_reducer';

class RestaurantsContainer extends React.Component{

    componentDidMount(){
        this.props.getRestaurants(this.props.currentPage, this.props.pageSize);
    }

    componentWillUnmount(){
        console.log(this.props.currentPage);
        this.props.setCurrentPage(1);
    }

    onPageChanged = (pageNumber) => {
        if(this.props.isSearch === false){
            this.props.getRestaurants(pageNumber, this.props.pageSize);
        } else{
            this.props.searchRestaurants(this.props.searchText, pageNumber, this.props.pageSize);
        }
    }

    const clearState = () => {
        setState({ ...initialState });
    };

    render(){
        return <Restaurants
            {...this.props}
            restaurants={this.props.restaurants}
            pageSize={this.props.pageSize}
            totalCountAll={this.props.totalCountAll}
            totalCount={this.props.totalCount}
            currentPage={this.props.currentPage}
            isFetching={this.props.isFetching}
            onPageChanged={this.onPageChanged}
            getRestaurantsAll={this.props.getRestaurantsAll}
            restaurantsAll={this.props.restaurantsAll}
            searchRestaurants={this.props.searchRestaurants}
            isSearch={this.props.isSearch}
            searchText={this.props.searchText}
            chartRestaurants={this.props.chartRestaurants}
            setRestaurantsAll={this.props.setRestaurantsAll}
        />
    }
}

let mapStateToProps = (state) => {
    return{
        restaurants: state.restaurantsPage.restaurants,
        pageSize: state.restaurantsPage.pageSize,
        totalCount: state.restaurantsPage.totalCount,
        totalCountAll: state.restaurantsPage.totalCountAll,
        currentPage: state.restaurantsPage.currentPage,
        isFetching: state.restaurantsPage.isFetching,
        onPageChanged: state.restaurantsPage.onPageChanged,
        getRestaurantsAll: state.restaurantsPage.getRestaurantsAll,
        restaurantsAll: state.restaurantsPage.restaurantsAll,
        searchRestaurants: state.restaurantsPage.searchRestaurants,
        isSearch: state.restaurantsPage.isSearch,
        searchText: state.restaurantsPage.searchText,
        chartRestaurants: state.restaurantsPage.chartRestaurants,
        setRestaurantsAll: state.restaurantsPage.setRestaurantsAll,
        setCurrentPage: state.restaurantsPage.setCurrentPage,
    }
}

export default compose(
    connect(mapStateToProps, {getRestaurants, setCurrentPage, searchRestaurants, getRestaurantsAll, chartRestaurants, setRestaurantsAll}),
    withRouter
)(RestaurantsContainer);

Ответы (1 шт):

Автор решения: Слава Денисюк

введите сюда описание изображения Пример Нахожусь на странице ресторанов, но при смене страницы currentPage изменяется везде Поэтому лучший выход, при смене страницы обновлять state в исходное состояние, как это сделать ?

→ Ссылка