-
-
Save cinic/2926e16cba5a095aa8bd5cf7f6694b86 to your computer and use it in GitHub Desktop.
effector + history
This file contains 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 { matchPath, RouteProps } from "react-router"; | |
// historyUpdated event is subscribed to history via history.listen or any other way | |
export const createPathMatcher = <Match = unknown>(config: { | |
path: string | string[] | RouteProps; | |
clock?: Event<any> | Store<any> | Effect<any, any>; | |
}) => { | |
return sample({ | |
source: historyUpdated, | |
clock: config.clock ?? historyUpdated, | |
fn: (update) => { | |
const { location } = update; | |
return location ? matchPath<Match>(location.pathname, config.path) : null; | |
}, | |
}).filterMap((match) => (match ? match : undefined)); | |
}; | |
// usage | |
const formMatched = createPathMatcher<{ id: string }>({ | |
path: "/form/edit/:id" | |
}); | |
// formMatched has { params: { id: string }, // + match meta fields } payload | |
// formMatched will be called only if matchPath returned match object (it can also return null, if no match) | |
// usage with route props | |
const homeMatched = createPathMatcher({ | |
path: { | |
path: "/home", | |
exact: true | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment