Реагировать Маршрутизатор Маршруты в Redux

Question

Используя редукционный и реагирующий маршрутизатор, я хотел бы получить доступ к параметру маршрута на компоненте, отличном от указанного в маршруте.

У меня есть реакция-маршрутизатор, редукция и реакция-маршрутизатор-редукция следующим образом, и я хотел бы получить доступ к параметру reportId из моего магазина redux.

const history = syncHistoryWithStore(browserHistory, store); 

const store = createStore(reducers); 

const routes = (
    <Router history={history}> 
     <Route path="/" component={MainLayout} > 
      <IndexRoute component={Home} /> 
      <Route path="reports"> 
       <Route path=":reportId" component={ReportViewerContainer} /> 
      </Route> 
     </Route> 
    </Router> 
); 

ReactDOM.render(
    <Provider store={store}>{router}</Provider>, 
    document.getElementById('root') 
); 

Я попытался подключение реагировать-Redux-маршрутизатор для хранения состояния маршрута, но я обнаружил, что там нет ничего полезного хранится внутри перевождите кроме полного пути к активному маршруту. Это оставило меня с вариантами либо разбора reportId из пути в redux, либо создания собственного пользовательского действия в redux и его обновления с помощью метода жизненного цикла componentWillReceiveProps внутри моего компонента ReportViewerContainer. Должен быть лучший способ?

Answer 1

Итак, я думаю, вы можете использовать context для получения местоположения, которое будет проходить через маршрутизатор. (Обратитесь к этой ссылке о том, как это работает.) Это должно дать вам солидное направление для работы.

Это также может помочь вам с помощью перекладины работать с интернационализации.

class MyComponent extends React.Component { 
    static contextTypes = { 
     router: React.PropTypes.object 
    }; 

    render(){ 
     // By declaring context type here, and childContextTypes 
     // on the parent along with a function with how to get it, 
     // React will traverse up and look for the `router` context. 
     // It will then inject it into `this.context`, making it 
     // available here. 
    } 
} 

Answer 2

Если вы хотите получить доступ к маршрутизатору в Redux магазине, есть HOC называется withRouter (docs). Если я правильно помню, это передаст какое-либо состояние маршрутизатора вашему компоненту в качестве реквизита.

Единственное изменение, которое нужно сделать, чтобы ваш компонент будет таким:

import { withRouter } from 'react-router' 

export default withRouter(ReportViewerContainer); 

Answer 3

Если вы хотите получить доступ к параметру маршрутизатора внутри компонента, лучший способ добиться этого с помощью withRouter

https://egghead.io/lessons/javascript-redux-using-withrouter-to-inject-the-params-into-connected-components

Вы найдете лучшее понимание с приведенным выше примером.