Created
June 13, 2017 06:53
-
-
Save mksarge/d02e8d14a5496dc98d4dde60dbebbf3c to your computer and use it in GitHub Desktop.
A minimal Redux-first routing implementation in <100 lines of code. Learn more: https://medium.com/@mksarge/98926ebf53cb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD, LOCATION_CHANGE } from './constants'; | |
export const push = (href) => ({ | |
type: PUSH, | |
payload: href, | |
}); | |
export const replace = (href) => ({ | |
type: REPLACE, | |
payload: href, | |
}); | |
export const go = (index) => ({ | |
type: GO, | |
payload: index, | |
}); | |
export const goBack = () => ({ | |
type: GO_BACK, | |
}); | |
export const goForward = () => ({ | |
type: GO_FORWARD, | |
}); | |
export const locationChange = ({ pathname, search, hash }) => ({ | |
type: LOCATION_CHANGE, | |
payload: { | |
pathname, | |
search, | |
hash, | |
}, | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const PUSH = 'ROUTER/PUSH'; | |
export const REPLACE = 'ROUTER/REPLACE'; | |
export const GO = 'ROUTER/GO'; | |
export const GO_BACK = 'ROUTER/GO_BACK'; | |
export const GO_FORWARD = 'ROUTER/GO_FORWARD'; | |
export const LOCATION_CHANGE = 'ROUTER/LOCATION_CHANGE'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { locationChange } from './actions'; | |
export function startListener(history, store) { | |
store.dispatch(locationChange({ | |
pathname: history.location.pathname, | |
search: history.location.search, | |
hash: history.location.hash, | |
})); | |
history.listen((location) => { | |
store.dispatch(locationChange({ | |
pathname: location.pathname, | |
search: location.search, | |
hash: location.hash, | |
})); | |
}); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD } from './constants'; | |
export const routerMiddleware = (history) => () => (next) => (action) => { | |
switch (action.type) { | |
case PUSH: | |
history.push(action.payload); | |
break; | |
case REPLACE: | |
history.replace(action.payload); | |
break; | |
case GO: | |
history.go(action.payload); | |
break; | |
case GO_BACK: | |
history.goBack(); | |
break; | |
case GO_FORWARD: | |
history.goForward(); | |
break; | |
default: | |
return next(action); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LOCATION_CHANGE } from './constants'; | |
const getInitialState = { | |
pathname: '/', | |
search: '', | |
hash: '', | |
}; | |
export const routerReducer = (state = getInitialState, action) => { | |
switch (action.type) { | |
case LOCATION_CHANGE: | |
return { | |
...state, | |
...action.payload, | |
}; | |
default: | |
return state; | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment