Измените URL-адрес и вызовите действие избыточности, чтобы получить данные в приложении реакции избыточности.

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

Я использую browserHistory реакции-маршрутизатора, чтобы передать мои входные данные по URL-адресу.

import React from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

class findBirthdays extends Component {
  constructor(props){
    super(props);
  }

  openCalender(){
    // here I open the date picker and let user select the date
    // then I add that date in the URL as "localhost:3000/find/?date=22-02-2017"
    // here I get confused as I do not know now how to dispatch the action or
    // how to access url params in a specific actions after dispatching that action
  }

  render(){
    return (
      // repeating all the birthday that are available on selected date
    )
  }
}

const mapStateToProps = (state) => {
  return {
    birthdayList: state.birthdays,
  };
};

export default connect(mapStateToProps)(findBirthdays);

У меня есть много входных данных, и при каждом событии изменения ввода будет добавлен URL-адрес, и это должно привести к отправке действия и получению правильных результатов.

Я новичок в реагировании и редуксе, поэтому, если кто-нибудь может предложить, можно ли это сделать или как подойти к этой проблеме, это было бы полезно. Спасибо ребята.


person NitinD    schedule 22.02.2017    source источник
comment
Итак, вы хотите dispatch на action или просто заменить route на date-query?   -  person Jyothi Babu Araja    schedule 22.02.2017
comment
@JyothiBabuAraja Если я выберу дату, она должна добавиться к URL-адресу, и это изменение URL-адреса должно отправить действие, которое примет параметры URL-адреса для дальнейшего процесса. Я добавил его в часть URL. Мне нужна помощь со второй частью.   -  person NitinD    schedule 22.02.2017
comment
Вы можете прочитать параметры запроса URL, такие как this.props.location.query.date   -  person Jyothi Babu Araja    schedule 22.02.2017
comment
@JyothiBabuAraja Я хочу прочитать это в действии, а не в компоненте реакции.   -  person NitinD    schedule 22.02.2017
comment
Затем отправьте это как параметр при отправке вашего действия.   -  person Jyothi Babu Araja    schedule 22.02.2017
comment
@jyothiBabuAraja Я знаю это, но я использую модуль под названием react-redux-router, который отправляет действие по умолчанию «LOCATION_CHANGE» при изменении URL-адреса. Я хочу справиться с этим действием. Я тоже получаю каждый запрос, но я получаю его в редюсере.   -  person NitinD    schedule 22.02.2017
comment
Давайте продолжим обсуждение в чате.   -  person NitinD    schedule 22.02.2017


Ответы (2)


когда URL-адрес изменится, componentWillRecevieProps будет вызываться автоматически, вы можете получить доступ к nextProps, после чего вы можете отправить любое действие, которое хотите.

в nextProps вы можете получить доступ к местоположению, в котором есть все, что вам нужно для URL

person Amir Tahani    schedule 22.02.2017

Извините, ребята, я что-то пропустил в своем коде, я решил это следующими способами:

  1. Whenever I will change input I will dispatch an action and update the URL.
    • so in above example, I will dispatch an action in

openCalender() после выбора даты.

  1. When a user wants to change the URL manually then I handle that on the server side.
    • When user will change the URL and press enter that means server renders the whole new page.
    • Я отправляю действие по умолчанию при загрузке страницы с помощью

this.props.location.query

params, предоставленные react-redux-router.

person NitinD    schedule 23.02.2017