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

Question

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

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

我是否在 onClick 的 HomeComponent 中dispatch？或者，如果服务器没有 initialState ，则在其他组件中分派(dispatch)操作？ (我正在做一个通用应用程序，所以如果我直接点击其他组件之一，初始状态已经在那里，但是来 self 的 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

抱歉，我可以添加评论，您不使用react-redux && redux-thunk 有什么原因吗？

你所要求的可以很容易地用这些来完成:你在mapDispatchToProps中获取你需要的东西并使用获取的初始状态调度一个 Action

你的reducer将捕获所述分派(dispatch)的操作并更新其状态，这将在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
}

在你的 react 组件上你会 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);