Каким способом можно полностью очистить react-redux хранилище при изменении url?

Question

[Vanya Huk]

Каким способом можно полностью очистить react-redux хранилище при изменении url?

Answer 1

[Sergey Epifanov]

1. Нужно отследить изменение url. Вариант реализации зависит от того, какой роутер используется, если реакт-роутер, то можно использовать хок
2. При изменении url нужно диспачить какой-то экшн, обрабатывать его, например, так

Comments

[Vanya Huk]

Sergey Epifanov : я хочу отследить изменение роута в root компоненте, как такое можно реализовать здесь

react-router-dom v4.0

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import ScrollToTop from 'react-router-scroll-top';
import Header from '../common/Header';
import Footer from '../common/Footer';
import ContentIndex from '../pages/ContentIndex'
import Catalog from '../pages/Catalog'


class Root extends Component {

	constructor(props) {

		super(props);
	}
	
	render() {
		return (
			<Router>
				<Header/>
					<div className="all-data">

						<Switch>

						<Route exact path={"/"} component={ContentIndex}/>

						<Route path={'/catalog'} component={Catalog}/>
						
						</Switch>
					</div>
					<Footer/>
				</Router>
		)
	}
}

function matchDispatchToProps(dispatch) {
	return bindActionCreators({}, dispatch)
}


export default connect(state => ({}), matchDispatchToProps)(Root);

[Sergey Epifanov]

Vanya Huk, оберните Root в хок withRouter, ссылку на него дал выше

[Vanya Huk]

Sergey Epifanov, так ошибка вылетает

[Sergey Epifanov]

Vanya Huk, покажите код и что за ошибка?

[Vanya Huk]

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch,withRouter} from 'react-router-dom';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import asyncComponent from '../AsyncComponent';
import ScrollToTop from 'react-router-scroll-top';
import Header from '../common/Header';
import Footer from '../common/Footer';

const ContentIndex = asyncComponent(() =>
	import('../pages/ContentIndex').then(module => module.default)
);

const Catalog = asyncComponent(() =>
	import('../pages/Catalog').then(module => module.default)
);


class Root extends Component {

	render() {
		return (
			<Router>
				<ScrollToTop>
					<Header/>
					<div className="all-data">

			<Switch>

				<Route exact path={"/"} component{ContentIndex}/>
						
			<Route path={'/' + this.props.api.auto + '/:type'}						 component={Catalog}/>

						</Switch>
					</div>
					<Footer/>
				</ScrollToTop>
			</Router>
		)
	}
}

function matchDispatchToProps(dispatch) {
	return bindActionCreators({}, dispatch)
}


export default withRouter( connect(state => ({

	api: state.api,

	user: state.user

}), matchDispatchToProps)(Root) );

[Vanya Huk]

Sergey Epifanov, говорит, что нельзя использовать withRouter вне Router

[Sergey Epifanov]

Vanya Huk, https://reacttraining.com/react-router/web/api/Bro...
рендерите Root внутри BrowserRouter

Answer 2

[edk55]

Один из вариантов - диспатчить событие при изменении url, а в главном reducer'е слушать это событие и ставить state равным undefined. Тогда в редьюсеры попадет state, равный undefined, и проставятся дефолтные значения.

import appReducer from '../reducers';

const rootReducer = (state, action) => {
  if (action.type === 'URL_CHANGED') {
    state = undefined;
  }

  return appReducer(state, action);
};

Answer 3

[real2210]

import { combineReducers } from 'redux';

import someone from './someone';
import someoneT from './someoneT';

export const rootReducer = (state, action) => {
  if (action.type === 'URL_CHANGED') {
    state = {}
  }

  return appReducer(state, action)
}

const appReducer = combineReducers({
  someone,
  someoneT
})