title: redux-saga Network Error - OPTIONS request
body: <p>I've create a wizard form that I change a little bit. Each step of the form fetch some data from API when componentWillMount and when user click on "next" to go to the next form part, I call dispatch another action with componentWillUnmout to dispatch an Update (PUT) action from the API. </p>
  
  <p>I'm using redux-saga with react. </p>
  
  <p>Here is the saga.js file : </p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>There is the API file : </p>
  
  <pre><code>import axios from 'axios';
  
  const baseUrl = '&lt;link&gt;';
  
  const accountApi = {
      fetchAccount(params) {
          return axios.get(`${baseUrl}${params}`)
              .then(response =&gt; {
                  return response.data
              })
      },
  
      updateAccount(params, accountUpdated) {
          return axios.put(`${baseUrl}${params}`, accountUpdated)
              .then(response =&gt; {
                  return response.data
              })
      }
  }
  
  export default accountApi;
  </code></pre>
  
  <p>the action :</p>
  
  <pre><code>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
      }
  }
  </code></pre>
  
  <p>the reducer : </p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>And the component :</p>
  
  <pre><code>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 (
              &lt;form onSubmit={handleSubmit}&gt;
                      &lt;Field 
                          label="Nom de l'établissement"
                          name="companyName"
                          type="text"
                          className="form-group"
                          component={this.renderFields}
                      /&gt;
                      &lt;Field 
                          label="Type d'établissement : "
                          name="typologie"
                          component={this.renderSelect}
                          className="form-group"
                      /&gt;
                      &lt;Field 
                          label="Votre numéro de téléphone de contact"
                          name="phone"
                          type="number"
                          className="form-group"
                          component={this.renderFields}
                      /&gt;
                      &lt;button type="submit" className="btn btn-tiller-full btn-tiller-right"&gt;Suite&lt;/button&gt;
              &lt;/form&gt;
          );  
      }
  }
  
  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;
  </code></pre>
  
  <p>(The next form step component is the same so I fetch data onmount and I update on unmount).</p>
  
  <p>Here is the index.js file : </p>
  
  <pre><code>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(
      &lt;Provider store={store}&gt;
          &lt;BrowserRouter&gt;
              &lt;div&gt;
                  &lt;Header /&gt;
                  &lt;Navigation /&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/informations" component={Informations} /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;,
      document.querySelector('.container-fluid')
  );
  </code></pre>
  
  <p>Here is the error that I have when I try to update :
  <a href="https://i.stack.imgur.com/VIWIb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VIWIb.png" alt="enter image description here"></a></p>
  
  <p>And I have a OPTIONS request...</p>
  
  <p>Someone could help ?</p>