使用redux-saga刪除項目

Question

我無法在應用程序中使用redux saga刪除項目。 我可以在redux thunk中做到這一點。 使用redux saga時刪除項目的流程是否正確？ 我的代碼有什么問題或我錯過了什么？ 誰能啟發我？

這是我的代碼

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

我在行注釋中看到了一些問題。

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

下面似乎更正確

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

我看不到其余的任何問題。