Обновление 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 в исходное состояние, как это сделать ?