0

Quelqu'un peut-il me dire comment appeler une action lorsque vous modifiez l'URL de la route dans le côté réactif côté réactif côté serveur avec réac-routeur pour le routage.Modifier l'URL et appeler l'action redux pour obtenir les données dans l'application redux réagir

J'utilise browserHistory de react-router pour pousser mes entrées à 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); 

J'ai beaucoup entrées et à chaque événement de changement d'entrée, sera l'URL et annexant qui devrait conduire à l'envoi d'une action et d'obtenir les résultats appropriés.

Je suis nouveau pour réagir et redux, donc si quelqu'un peut suggérer si cela peut être fait ou comment aborder ce problème qui serait utile. Merci les gars.

+0

Donc, vous voulez 'dispatch' une' action' ou juste changer 'route' avec' date-query'? –

+0

@JyothiBabuAraja Si je sélectionne la date, elle devrait être ajoutée à url et cette modification de l'url devrait envoyer l'action qui prendra les paramètres url pour un traitement ultérieur. J'ai fait l'ajouter à la partie url. J'ai besoin d'aide pour la deuxième partie. – NitinD

+0

Vous pouvez lire les paramètres de requête url comme 'this.props.location.query.date' –

Répondre

0

gars désolé d'avoir manqué quelque chose dans mon code, j'ai résolu cela par les moyens suivants,

  1. Chaque fois que je vais modifier l'entrée, je vais envoyer une action et mettre à jour l'URL.
    • donc dans l'exemple ci-dessus, je vais envoyer une action

fonction openCalender() après avoir sélectionné la date.

  1. Lorsqu'un utilisateur souhaite modifier l'URL manuellement alors je poignée sur le côté serveur.
    • Lorsque l'utilisateur va changer l'URL et appuyez sur Entrée, cela signifie que le serveur rend toute la nouvelle page.
    • Je suis expéditrice une action par défaut à la page charge avec,

this.props.location.query

params, qui a fourni par réagir-redux-routeur.

0

lorsque l'URL change componentWillRecevieProps appelleront vous pouvez automatiquement y accéder nextProps vous pouvez envoyer toute action que vous voulez

à nextProps vous pouvez accéder à l'emplacement qui a tout u besoin d'environ url