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) {
  const devices = yield select(selectDevices);
  return !!devices.get(device.get('id'));
}

下面似乎更正确

Columns1 | Column2 | Column3
1 | 11 | 33
3 | 34 | 56 
4 | 24 | 23
5 | 74 | 64 
3 | 45 | 52
2 | 54 | 53
1 | 76 | 92

我没有看到其他任何问题。

使用redux-saga删除项目

1 个答案: