Wie Routen nach einer Ajax-Anforderung, um den Übergang in redux

Question

ich auf einem hohen Niveau frage mich, was das richtige Muster für den folgende ist ...

Ich habe ein HomeComponent, mit einigen Links zu anderen Komponenten. Wenn ich auf einen der Links klicke, möchte ich eine Ajax-Anfrage machen, um den Anfangszustand für diese Komponente zu erhalten.

Tue ich dispatch in der HomeComponent in der onClick? Oder senden Sie eine Aktion in den anderen Komponenten, wenn keine initialState vom Server ist? (Ich mache eine universelle App, also wenn ich eine der anderen Komponenten direkt treffen würde, wäre der Anfangszustand schon da, aber kommend von meinem HomeComponent, sind die Daten NICHT dort)

Das ist was ich bisher hatte ...

class HomeComponent extends React.Component { 
    navigate(e) { 
    e.preventDefault(); 

    // Fetch data here 
    actions.fetch(1234); 

    // When do I call this? 
    browserHistory.push(e.target.href); 
    } 
    render() { 
    const links = [ 
     <a href="/foo/1247462" onClick={this.navigate}>Link 1</a>, 
     <a href="/foo/1534563">Link 2</a>, 
    ]; 

    return (
     <ul> 
     {links.map((link) => (
      <li>{link}</li> 
     ))} 
     </ul> 
    ); 
    } 
} 

Answer 1

Leider i Kommentar hinzufügen können, gibt es einen Grund, warum Sie verwenden nicht reagieren-redux & & redux-Thunk?

, was Sie fragen können leicht mit denen getan werden: Sie holen, was Sie in mapDispatchToProps benötigen & Versand eine Aktion mit dem geholten Ausgangszustand

Ihr Minderer wird die genannte versandt Aktion fangen und seinen Zustand zu aktualisieren, die das Update Requisiten der reagieren Komponente mit Hilfe von mapStateToProps

ich aus dem Gedächtnis schreibe, es nicht genau 100% sein könnte:

redux Datei

componentNameReducer = (
    state = { 
     history: '' 
    }, 
    type = {} 
) => { 
    switch(action.type) { 
     case 'HISTORY_FETCHED_SUCCESSFULLY': 
      return Object.assign({}, state, { 
       history: action.payload.history 
      }); 
     default: 
      return state; 
    } 
}; 

mapStateToProps = (state) => { 
    history: state.PathToWhereYouMountedThecomponentNameReducerInTheStore.history 
}; 

mapDispatchToProps = (dispatch) => ({ 
    fetchHistory :() => { 
     fetch('url/history') 
      .then((response) => { 
       if (response.status > 400) { 
        disptach({ 
         type: 'HISTORY_FETCH_FAILED', 
         payload: { 
          error: response._bodyText 
         } 
        }); 
       } 
       return response; 
      }) 
      .then((response) => response.json()) 
      .then((response) => { 
       //do checkups & validation here if you want before dispatching 
       dispatch({ 
        type: 'HISTORY_FETCHED_SUCCESSFULLY', 
        payload: { 
         history: response 
        } 
       }); 
      }) 
      .catch((error) => console.error(error)); 
    } 
}); 

module.exports = { 
    mapStateToProps, 
    mapDispatchToProps, 
    componentNameReducer 
} 

Auf Ihrer reagieren Komponente auch need:

import React, { 
    Component  
} from 'somewhere'; 

import { mapStateToProps, mapDispatachToProps } from 'reduxFile'; 
import { connect } from 'react-redux'; 

class HistoryComponent extends Component { 
    constructor(props){ 
     super(props); 
     this.props.fetchHistory(); //this is provided by { connect } from react-redux 
    } 
    componentWillReceiveProps(nextProps){ 
     browserHistory.push(nextProps.history); 
    } 
    render() { 
     return (

     ); 
    } 
} 
//proptypes here to make sure the component has the needed props 

module.exports = connect(
    mapStateToProps, 
    mapDispatachToProps 
)(HistoryComponent);