使用redux-saga删除项目

Question

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);
  }

Answer 1

Some problems I see with comments on lines.

function* isDeviceToDeleteValid(device) {
  // select takes a function, unless selectDevices() was returning a function
  const devices = yield select(selectDevices());
  // shouldn't you be returning a boolean??
  if (devices.get(device.get('id'))) {
    yield put(deleteDeviceSuccess(device.get('id'), device));
  }
}

Below seems more correct

function* isDeviceToDeleteValid(device) {
  const devices = yield select(selectDevices);
  return !!devices.get(device.get('id'));
}

I don't see any problems with the rest.