Как переход маршрутов после Ajax запроса в Redux

Question

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

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

Является dispatch в HomeComponent в onClick? Или отправить действие в другие компоненты, если нет initialState с сервера? (Я делаю универсальное приложение, поэтому, если бы я сразу попал в один из других компонентов, исходное состояние уже было бы там, но из моего HomeComponent, данные НЕ будут там)

Это что я имел до сих пор ...

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

к сожалению, я могу добавить комментарий, есть причина, что вы не используете реагировать-Redux & & Redux-преобразователь,?

то, что вы спрашиваете можно легко сделать с теми: вы запрашиваете, что вам нужно в mapDispatchToProps & направить действие с извлеченным начальным состоянием

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

Я пишу из памяти, она не может быть точно 100%:

перевождь файл

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 
} 

на вашем реагировать компонент, вы сможете 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);