oklas/react-breadcrumbs-dynamic

It's breadcrumbs doesn't work with redux ?

yaromirkozak opened this issue · 2 comments

It's breadcrumbs doesn't work with redux ?
oklas commented

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.

oklas commented

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