Question

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

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

dispatch中的HomeComponent中我onClick了吗？如果服务器中没有initialState，还是在其他组件中调度操作？（我正在做一个通用应用程序，所以如果我要直接点击其他组件之一，初始状态已经存在，但来自我的HomeComponent，数据WON＆＃39; T be有）

这是我到目前为止所做的......

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＆amp;＆amp; redux-thunk？

你可以轻松地完成这些：你在mapDispatchToProps＆amp;中获取你需要的东西。使用获取的初始状态发送动作

您的reducer将捕获所述已调度的操作并更新其状态，该状态将在mapStateToProps的帮助下更新react组件的支柱

我是从记忆中写的，可能不是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);

如何在redux

1 个答案: