Как получить новые данные в ответ на изменение React Router с помощью Redux?

Я использую Redux, redux-router и reactjs.

Я пытаюсь создать приложение, в котором я получаю информацию об изменении маршрута, поэтому у меня есть что-то вроде:

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

Когда кто-то входит в artist/<artistId>, я хочу найти исполнителя, а затем передать информацию. Вопрос в том, что это лучший способ сделать это?

Я нашел несколько ответов об этом, используя RxJS или попробовав промежуточное программное обеспечение для управления запросами. Теперь, мой вопрос: действительно ли это необходимо или просто способ реагировать на агрегирование архитектуры? Могу ли я просто получить информацию, которая мне нужна, вместо реакции componentDidMount() и componentDidUpdate()? Сейчас я делаю это, вызывая действие в тех функциях, которые запрашивают информацию, а компонент повторно отображает информацию о прибытии. У компонента есть некоторые свойства, позволяющие мне знать, что:

{
    isFetching: true,
    entity : {}
}

Спасибо!

Ответы

Ответ 1

Теперь, мой вопрос: действительно ли это необходимо или просто способ реагировать на реакцию агностики? Могу ли я просто получить информацию, которая мне нужна, вместо реакции componentDidMount() и componentDidUpdate()?

Вы можете полностью сделать это в componentDidMount() и componentWillReceiveProps(nextProps).
Это то, что мы делаем в real-world example в Redux:

function loadData(props) {
  const { fullName } = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);
}

class RepoPage extends Component {
  constructor(props) {
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  }

  componentWillMount() {
    loadData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fullName !== this.props.fullName) {
      loadData(nextProps);
    }

  /* ... */

}

Вы можете получить более сложные с Rx, но это совсем не обязательно.

Ответ 2

Я сделал это с пользовательской привязкой к обычным маршрутизаторам onEnter/onLeave реквизитам обратного вызова, например:

const store = configureStore()

//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />

Это немного взломанный, но работает, и я не знаю лучшего решения прямо сейчас.

Ответ 3

1) отправка оптимистичных действий запроса при изменении маршрута, т.е. BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) Асинхронные действия: http://redux.js.org/docs/advanced/AsyncActions.html