mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
Add Routing duck to track location changes
This commit is contained in:
parent
945f6d4862
commit
e82a775049
3 changed files with 46 additions and 3 deletions
|
|
@ -5,6 +5,7 @@ import { connect } from 'react-redux';
|
|||
import { Switch, Route, withRouter } from 'react-router-dom';
|
||||
import { NotFoundPage } from './containers';
|
||||
import { NamedRedirect } from './components';
|
||||
import { locationChanged } from './ducks/Routing.duck';
|
||||
import * as propTypes from './util/propTypes';
|
||||
import * as log from './util/log';
|
||||
|
||||
|
|
@ -34,10 +35,17 @@ const callLoadData = props => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleLocationChanged = (dispatch, location) => {
|
||||
const { pathname, search, hash } = location;
|
||||
const canonicalUrl = `${pathname}${search}${hash}`;
|
||||
dispatch(locationChanged(location, canonicalUrl));
|
||||
};
|
||||
|
||||
class RouteComponentRenderer extends Component {
|
||||
componentDidMount() {
|
||||
// Calling loadData on initial rendering (on client side).
|
||||
callLoadData(this.props);
|
||||
handleLocationChanged(this.props.dispatch, this.props.location);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
|
@ -45,6 +53,7 @@ class RouteComponentRenderer extends Component {
|
|||
// This makes it possible to use loadData as default client side data loading technique.
|
||||
// However it is better to fetch data before location change to avoid "Loading data" state.
|
||||
callLoadData(nextProps);
|
||||
handleLocationChanged(nextProps.dispatch, nextProps.location);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
32
src/ducks/Routing.duck.js
Normal file
32
src/ducks/Routing.duck.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// ================ Action types ================ //
|
||||
|
||||
export const LOCATION_CHANGED = 'app/Routing/LOCATION_CHANGED';
|
||||
|
||||
// ================ Reducer ================ //
|
||||
|
||||
const initialState = {
|
||||
currentLocation: null,
|
||||
currentCanonicalUrl: null,
|
||||
};
|
||||
|
||||
export default function routingReducer(state = initialState, action = {}) {
|
||||
const { type, payload } = action;
|
||||
switch (type) {
|
||||
case LOCATION_CHANGED:
|
||||
return {
|
||||
...state,
|
||||
currentLocation: payload.location,
|
||||
currentCanonicalUrl: payload.canonicalUrl,
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// ================ Action creators ================ //
|
||||
|
||||
export const locationChanged = (location, canonicalUrl) => ({
|
||||
type: LOCATION_CHANGED,
|
||||
payload: { location, canonicalUrl },
|
||||
});
|
||||
|
|
@ -6,20 +6,22 @@
|
|||
|
||||
import { reducer as form } from 'redux-form';
|
||||
import Auth from './Auth.duck';
|
||||
import EmailVerification from './EmailVerification.duck';
|
||||
import FlashNotification from './FlashNotification.duck';
|
||||
import LocationFilter from './LocationFilter.duck';
|
||||
import Routing from './Routing.duck';
|
||||
import UI from './UI.duck';
|
||||
import marketplaceData from './marketplaceData.duck';
|
||||
import user from './user.duck';
|
||||
import EmailVerification from './EmailVerification.duck';
|
||||
|
||||
export {
|
||||
form,
|
||||
Auth,
|
||||
EmailVerification,
|
||||
FlashNotification,
|
||||
LocationFilter,
|
||||
Routing,
|
||||
UI,
|
||||
form,
|
||||
marketplaceData,
|
||||
user,
|
||||
EmailVerification,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue