使用 redux-saga 删除项目答案

【问题标题】：Delete an item using redux-saga使用 redux-saga 删除项目
【发布时间】：2017-02-12 03:55:57
【问题描述】：

我无法在我的应用程序中使用 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);
  }

【问题讨论】：

.filter(() => device.get('id') !== action.deviceId); 什么？你确定不想要：.filter((someDevice) => someDevice.get('id') !== action.deviceId);?
是的，应该是 device => device.get('id')。 redux-saga 删除项目的方式对吗？

标签： javascript reactjs redux immutable.js redux-saga

【解决方案1】：

我在线路上看到的 cmets 的一些问题。

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

我认为其余的没有任何问题。

【讨论】：