Delete an item using redux-saga

528
February 12, 2017, at 4:02 PM

I could not delete an item using redux saga in my application. I could do it in redux thunk. Is the flow of deleting an item right when using redux saga? What is wrong in my code or what have i missed? Can anyone please enlighten me?

Here is my code

saga.js

export function dataLoader(apiUri, onSuccess, onError, data) {
  return function* () {  // eslint-disable-line func-names
    const requestURL = `${API_BASE}${apiUri}?format=json`;
    try {
      // Call our request helper (see 'utils/request')
      let options;
      if (data !== undefined) {
        // If we have data to post
        options = {
          method: 'POST',
          body: JSON.stringify(data),
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': Cookies.get('csrftoken'),
            'X-Requested-With': 'XMLHttpRequest',
          },
        };
      }
      const response = yield call(request, requestURL, options);
      yield put(onSuccess(response));
    } catch (e) {
      let error = null;
      try {
        error = yield call(() => e.response.json());
      } catch (_) {
        error = {
          errors: [{
            'error code': e.response.status,
            'error msg': e.response.statusText,
          }],
        };
      }
      yield put(onError(error));
    }
  };
  function* isDeviceToDeleteValid(device) {
    const devices = yield select(selectDevices());
    if (devices.get(device.get('id'))) {
      yield put(deleteDeviceSuccess(device.get('id'), device));
    }
  }
  function* deleteDevice(action) {
    const device = action.data.toJS();
    if (yield call(isDeviceToDeleteValid, fromJS(action.data))) {
      yield fork(dataLoader(`/device/${device.id}`, deleteDeviceSuccess, deleteDeviceError, action.data));
    }
  }
  function* rootSaga() {
    yield takeEvery(DELETE_DEVICE, deleteDevice);
  }

actions.js

  export function deleteDevice(data) {
    return {
      type: DELETE_DEVICE,
      data,
    };
  }
  export function deleteDeviceSuccess(deviceId, device) {
    return {
      type: DELETE_DEVICE_SUCCESS,
      deviceId,
      device,
    };
  }
  export function deleteDeviceError(error) {
    return {
      type: DELETE_DEVICE_ERROR,
      error,
    };
  }

reducers.js

  case CREATE_DEVICE:
  case UPDATE_DEVICE:
  case DELETE_DEVICE:
    return state
      .set('loading', true)
      .set('error', null);
  case CREATE_DEVICE_ERROR:
  case UPDATE_DEVICE_ERROR:
  case DELETE_DEVICE_ERROR:
    return state
      .set('loading', false)
      .set('error', action.error);
  case CREATE_DEVICE_SUCCESS:
  case UPDATE_DEVICE_SUCCESS: {
    const device = fromJS(action.device.data, idReviver);
    return state
      .set('loading', false)
      .set('error', null)
      .setIn(['devices', device.get('id')], device);
  }
  case DELETE_DEVICE_SUCCESS: {
    const device = fromJS(action.device, idReviver);
    return state
      .set('loading', false)
      .set('error', null)
      .filter(() => device.get('id') !== action.deviceId);
  }
READ ALSO
Select text in contenteditable after it has changed

Select text in contenteditable after it has changed

I am about to write a input system for a web application that is a bit more complexWe have Labels in our text that are weather displayed as a bootstrap label (when the contenteditable div is blured) or displayed as handlebars e

409
Apache Commons Compress unable to add hard link in tar

Apache Commons Compress unable to add hard link in tar

I have a set of files in which there are some hard links pointing to some of the filesFor Example:

392
Full Screen Exclusive Mode Key Input with just a Window

Full Screen Exclusive Mode Key Input with just a Window

I am working on a small game using full screen exclusive and I need to be able to receive keyboard input from the player

461
How to list down all webcams in jComboBox? (sarxos library)

How to list down all webcams in jComboBox? (sarxos library)

I have two webcamsIs it possible to list down all webcam devices in jComboBox?

403