Question

我正在使用react / redux / react-redux来实现执行ajax请求的模式表单。

如果我是正确的，react-redux可以让你：

显示从redux商店到您的组件的数据
将容器中的事件发送到redux

我也在使用redux-saga来处理redux触发的Ajax请求。

但是，当从Redux触发特定事件时，我不知道如何触发动作（例如：关闭模态形式）。

代码示例：

class MyFormDialog extends React.Component {
    state = {
        open: false,
    };


    handleOpen = () => {
        this.setState({open: true});
    };

    handleClose = () => {
        this.setState({open: false});
    };

    render() {
        const actions = [
            <FlatButton
                label="Cancel"
                onTouchTap={this.handleClose}
            />,
            <FlatButton
                label="Submit"
                onTouchTap={this.props.ajaxRequest}
            />,
        ];

        return (
            <div>
                <MenuItem primaryText="Make a request"  onTouchTap={this.handleOpen}/>
                <Dialog
                    title="Make a request"
                    actions={actions}
                    modal={true}
                    open={this.state.open}
                    onRequestClose={this.handleClose} />
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        loading: state.isLoading,
        success: state.success,
        error: state.error,
    }
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        ajaxRequest: (url, tags) => {
            dispatch({type: "AJAX_REQUESTED"})
        },
    }
};

const ConnectedMyFormDialog = connect(
    mapStateToProps,
    mapDispatchToProps
)(MyFormDialog );

export default ConnectedMyFormDialog ;

Reducers的构建如下：

isLoading = true

AJAX_REQUESTED

success = true

AJAX_SUCCESS

error = true

AJAX_FAIL

state.open

isLoading

true

因此，当false从success更改为false而true更改为function* handleAjaxRequest(action) { try { yield call(api.doRequest); yield put({type: "AJAX_SUCCESS"}); } catch (e) { yield put({type: "AJAX_FAILED"}); } } export default function* () { yield [ takeEvery("AJAX_REQUESTED", handleAjaxRequest), ] }时，我希望将// Find first point with a Y2 value of equal or less than 10. var dataPoint = Chart1.Series[1].Points.Where(x => x.YValues <= 10); foreach (DataPoint dt in dataPoint) { dt.BorderDashStyle = ChartDashStyle.Dot; dt.Color = Color.Red; }更改为false {1}}。

我不知道如何在不搞乱状态的情况下做到这一点。

编辑：

这是我的传奇代码，用于处理事件：

  public PhotocopierDBContext()
: base("PhotocopierInformationManagementServicesEntities")
 {
 }

Answer 1

您可以使用componentWillReceiveProps()，只要您的组件获得redux属性/状态更新，就会调用它。在那里，您可以对redux状态更改做出反应并相应地设置本地组件状态。

在你的例子中，它将是：

componentWillReceiveProps(nextProps) {
  if (nextProps.loading !== this.props.loading &&
      nextProps.success !== this.props.success &&
      !nextProps.loading && nextprops.success) {
    this.setState({ open: false });
  }
}

这正是您定义的行为。 Imo你还应该处理其他情况并更动态地设置state.open，但这超出了问题的范围。

供参考，请参阅此处：https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

使用react-redux触发对事件的操作

1 个答案: