如何在redux中的ajax请求后转换路由答案

【问题标题】：How to transition routes after an ajax request in redux如何在redux中的ajax请求后转换路由
【发布时间】：2016-04-05 14:56:19
【问题描述】：

我很想知道下面的正确模式是什么......

我有一个HomeComponent，有一些指向其他组件的链接。当我单击其中一个链接时，我想发出一个 ajax 请求以获取该组件的初始状态。

我是否在HomeComponent 中使用dispatch 在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>
    );
  }
}

【问题讨论】：

标签： ajax reactjs react-router redux

【解决方案1】：

对不起，我可以添加评论，你没有使用 react-redux && redux-thunk 有什么原因吗？

您的要求可以通过这些轻松完成：您在 mapDispatchToProps 中获取您需要的内容并使用获取的初始状态调度一个操作

您的 reducer 将捕获所述调度的动作并更新其状态，这将在 mapStateToProps 的帮助下更新 react 组件的 props

我是凭记忆写的，可能不是 100% 准确：

redux 文件

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);

【讨论】：