It's breadcrumbs doesn't work with redux ?
yaromirkozak opened this issue · 2 comments
This breadcrumbs library designed to be maximum flexibility and to be correspond to component approach and it does not depend from react-redux nor react-router but available to be used together with. However mapping to redux state is possible only by internal deprecated api which will be rewrited. I am interesting, what is use case to access breadcrumbs data outside of breadcrumbs? And what is use case to integrate breadcrumbs data in global application state?
I leave this open until approppriate api is published.
There is an simplest way how to maps breadcrumbs data to a redux storage:
import { connect } from 'react-redux'
import { withBreadcrumbsContainer, breadcrumbsThroughArea } from 'react-breadcrumbs-dynamic'
const BreadcrumbsToReduxMapper = (props) => (
// take breadcrumbs data
const data = props[breadcrumbsThroughArea]
// map breadcrumbs data to array sorted by pathname length
const breadcrumbs = Object.keys(data).sort(
(a, b) => a.length - b.length
).map(
pathname => data[pathname]
)
// send redux action with breadcrumbs data to redux storage
props.dispatch({
type: 'UPDATE_BREADCRUMBS_DATA',
data: breadcrumbs,
})
return null
}
// connect to breadcrumbs `through area` and to `redux`
export default connect()(
withBreadcrumbsContainer(BreadcrumbsToReduxMapper)
)
Than instantiate somewhere:
render() {
return (
<BreadcrumbsToReduxMapper />
)
}
The variable breadcrumbsThroughArea
contain react-through
area. Read about through area in react-through