Calling redux-form dispatch(change) from within a redux-saga

Question

I have a saga that posts to a webservice and returns a new sales order number to state. This is working great and looks like this.

//New SALES NUMBER SAGA
function getNewSalesNumber(salesRepId, typeId) {
  const url = `${baseUrl}/api/SalesOrder/${salesRepId}?typeId=${typeId}`;
  console.log(url);
  return axios.post(url);
}

function* callGetNewSalesNumber({salesRepId, typeId, resolve, reject}) {
  const result = yield call(getNewSalesNumber, salesRepId, typeId)
    if (result.data) {
    yield put({type: "NEWSALESNUMBER_FETCHED", result});
//    yield call(resolve); 
    } else {
//    yield call(reject);
  }
}

function* getNewSalesNumberSaga() {
  yield* takeEvery("FETCH_NEWSALESNUMBER", callGetNewSalesNumber);
}

The reducer looks like this.

    function newSalesNumber(state = {}, action) {
  switch(action.type) {
    case 'NEWSALESNUMBER_FETCHED':
      return state
        .set("orderHeader.orderId", action.result);
    default:
      return state;
  }
}

export default newSalesNumber;

I'm trying to figure out what my options are for returning that value to newSalesNumber (which is now in state) to a Field.

If I was doing this from within the form component I would use something like this...

 this.props.dispatch(change('mainForm', 'orderNumber', "testNumber"));

Is there a way to do this from within the saga after the data is received> Can I call dispatch(change) from outside of the connected form (in Saga)?

Intwine

In your reducer, you are not changing any state, you should have something like case 'NEWSALESNUMBER_FETCHED': return state.set(<name of prop>, action.result); After changing the state in your reducer, the component property mapped to the state through mapStateToProps will be automatically updated. – Linson

@Linson Thanks for the response. So setting the state in the reducer is working correctly.... via the current Saga. I'm wondering how I get that state displayed into the actual input of redux-form? – Intwine

So @Dario, now that I've had some coffee what you are saying makes more sense. I updated the code in the reducer (see above edits) but am now receiving a uncaught at callGetNewSalesNumber TypeError: state.set is not a function. Thoughts? – Intwine

Are you using immutable for keeping track of the state or state is a plain js object? How does your component look like? – Linson

So I think I was going about this wrong. I'm correctly returning my data to state from redux-saga, just not in the actual redux-form. Any thoughts on how take mapState and returning a value to a <Field/>? – Intwine

Answer 1

You can do it directly from sagas like this(we are using this in our project)

yield put(change('form_name', 'property_name', value_for_the_property))

Or you can return the data through reducers and use it in the container level to update your redux form.

Tatouay