Question

我创建了一个向导表单，我稍微改了一下。当componentWillMount和用户点击“next”转到下一个表单部分时，表单的每一步都从API获取一些数据，我调用另一个使用componentWillUnmout的动作来从API调度Update（PUT）动作。

我正在使用redux-saga做出反应。

这是saga.js文件：

import { call, put, takeEvery } from 'redux-saga/effects';
import accountApi from '../../api/account';
import * as actions from '../../actions';

import {
    FETCH_ACCOUNT_REQUEST,
    FETCH_ACCOUNT_SUCCESS,
    UPDATE_ACCOUNT_REQUEST,
    UPDATE_ACCOUNT_SUCCESS
} from '../../actions/types';

export function* fetchAccount(action) {
    const account = yield call(accountApi.fetchAccount, action.params);
    yield put({ type: FETCH_ACCOUNT_SUCCESS, account: account });
}

export function* updateAccount(action) {
    const accountUpdated = yield call(accountApi.updateAccount, action.params, action.accountUpdated);
    yield put({ type: UPDATE_ACCOUNT_SUCCESS, accountUpdated: accountUpdated });
}

export function* accountListener() {
    yield takeEvery(FETCH_ACCOUNT_REQUEST, fetchAccount);
    yield takeEvery(UPDATE_ACCOUNT_REQUEST, updateAccount);
}

有API文件：

import axios from 'axios';

const baseUrl = '<link>';

const accountApi = {
    fetchAccount(params) {
        return axios.get(`${baseUrl}${params}`)
            .then(response => {
                return response.data
            })
    },

    updateAccount(params, accountUpdated) {
        return axios.put(`${baseUrl}${params}`, accountUpdated)
            .then(response => {
                return response.data
            })
    }
}

export default accountApi;

行动：

import axios from 'axios';

import {
    FETCH_ACCOUNT_REQUEST,
    UPDATE_ACCOUNT_REQUEST
} from './types';

export function fetchAccount(params) {
    return {
        type: FETCH_ACCOUNT_REQUEST,
        params
    }
}

export function updateAccount(params, accountUpdated) {
    return {
        type: UPDATE_ACCOUNT_REQUEST,
        params,
        accountUpdated
    }
}

减速器：

import { 
    FETCH_ACCOUNT_REQUEST, 
    FETCH_ACCOUNT_SUCCESS, 
    UPDATE_ACCOUNT_REQUEST,
    UPDATE_ACCOUNT_SUCCESS
} from '../actions/types';

export default function(state = null, action) {
    switch (action.type) {
        case FETCH_ACCOUNT_REQUEST:
            return null;
        case FETCH_ACCOUNT_SUCCESS:
            return action.account;
        case UPDATE_ACCOUNT_REQUEST:
            return null;
        case UPDATE_ACCOUNT_SUCCESS:
            return action.accountUpdated;
        default:
            return state;
    }
}

组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';
import validate from './validate';

class FormGlobalInformations extends Component {
    componentWillMount() {
        const fakeAccountId = '?accountId=0012400000oAMhY';
        this.props.actions.fetchAccount(fakeAccountId);
    }

    componentDidMount() {
        if (this.props.account) {
            this.props.initialize({
                companyName: this.props.account.companyName,
                typologie: this.props.account.typologie,
                phone: this.props.account.phone
            });
        }
    }

    componentWillUnmount() {
        const fakeAccountId = '?accountId=0012400000oAMhY';
        this.props.actions.updateAccount(fakeAccountId, this.props.form.Information.values);
    }

    render() {
        const { handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit}>
                    <Field 
                        label="Nom de l'établissement"
                        name="companyName"
                        type="text"
                        className="form-group"
                        component={this.renderFields}
                    />
                    <Field 
                        label="Type d'établissement : "
                        name="typologie"
                        component={this.renderSelect}
                        className="form-group"
                    />
                    <Field 
                        label="Votre numéro de téléphone de contact"
                        name="phone"
                        type="number"
                        className="form-group"
                        component={this.renderFields}
                    />
                    <button type="submit" className="btn btn-tiller-full btn-tiller-right">Suite</button>
            </form>
        );  
    }
}

function mapStateToProps(state) {
    return {
        account: state.account,
        form: state.form
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}

FormGlobalInformations = connect(mapStateToProps, mapDispatchToProps)(FormGlobalInformations);

FormGlobalInformations = reduxForm({
    form: 'Information',
    destroyOnUnmount: false,
    validate
})(FormGlobalInformations);

export default FormGlobalInformations;

（下一个表单步骤组件是相同的，所以我在onmount上获取数据，然后在卸载时更新）。

这是index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
// import ReduxThunk from 'redux-thunk';
import { all } from 'redux-saga/effects';

import createSagaMiddleware from 'redux-saga';
import reducers from './reducers';

// Components
import Informations from './components/Informations/Informations';
import Navigation from './components/Navigation/Navigation';
import Header from './components/Navigation/Header';

import { accountListener } from './services/account/saga';

function* RootListener() {
    yield all([
        accountListener()
    ]);
}

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    reducers,
    applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(RootListener);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Header />
                <Navigation />
                <Switch>
                    <Route path="/informations" component={Informations} />
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>,
    document.querySelector('.container-fluid')
);

以下是我尝试更新时出现的错误：

我有一个OPTIONS请求......

有人可以帮忙吗？

Answer 1

从API更新（PUT）操作。

我有一个OPTIONS请求......

该问题很可能不依赖于redux-saga，因为axios内部调用发生错误。假设PUT动词的前置条件影响强制OPTIONS预检查询，该查询返回请求来源的可用CORS政治。它是强制性的，因为PUT是状态更改动词，因此返回允许HTTP标头（如GET - 请求）非常晚，这就是为什么使用独立预检查询的原因。

在此处How to apply CORS preflight cache to an entire domain和Why is an OPTIONS request sent and can I disable it?

了解更多资讯

最简单的解决方案此处未提供预检查询：https://stackoverflow.com/a/40373949/7878274

redux-saga网络错误 - OPTIONS请求

1 个答案: