創建一個Redux-saga偵聽器

Question

我對redux傳奇做了UPDATE_DATE操作。 我想在每次修改日期時更新多個資源。 我想實現觸發回調的動作UPDATE_DATE_SUCCESS的偵聽器。 任何想法？ 如果可以從React組件中調用它，那將是很棒的。

行動：UPDATE_DATE UPDATE_DATE_SUCCESS UPDATE_DATE_FAILURE

export const {
  updateDate,
  OnDateChange,
} = createActions({
  [ActionTypes.UPDATE_DATE]: (date) => date,
});

佐賀

export function* updateDate(newDate) {
  console.log('from sagas to reducer', newDate); // eslint-disable-line no-console
  try {
    yield put({
      type: ActionTypes.UPDATE_DATE_SUCCESS,
      payload: newDate,
    });
  } catch (err) {
    /* istanbul ignore next */
    yield put({
      type: ActionTypes.UPDATE_DATE_FAILURE,
      payload: err,
    });
  }
}

export default function* root() {
  yield all([
    takeLatest(ActionTypes.UPDATE_DATE, updateDate),
    takeEvery(ActionTypes.UPDATE_DATE_SUCCESS, test),
  ]);
}

在React Component上的理想實現

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch(onDateChange((newDate) => {
        dispatch(getApps(newDate));
        dispatch(getPlatforms(newDate));
        dispatch(getNetworks(newDate));
        dispatch(getCountries(newDate));
        dispatch(getFormats(newDate));
        dispatch(getDevices(newDate));
        dispatch(getNetworkKeys(newDate));
    }));
  }

有什么幫助嗎？ 謝謝！

Answer 1

我不太了解您要做什么，但是...如果您只想要一個偵聽器，為什么不只訂閱一個執行特定動作的接聽動作呢？

 function * mySuperSagaListener() {
    const listener = yield take('some_action_name')
    // calculate the new state here
    // here
    // here
    // when you are done... update the state
    const updateState = yield put({type: 'some_action_name_update', payload: newState})
 }

然后，您的組件將僅通過react-redux HOC預訂狀態的一部分，並根據...進行更新，如果您只想從這些組件中分派動作，則：

 dispatch({type: 'some_action_name'})

最好！

Answer 2

Redux Sagas背后的想法是要處理動作/事件在Saga而非組件中side-effects 。 我認為這樣做的方式是這樣的（請注意，該代碼段未經測試，僅用作參考/示例）：

 // --> Saga <-- // import { getApps, getPlatforms, getNetworks, getCountries, getFormats, getDevices, getNetworkKeys } from './actions.js'; export function* updateDateWatcher(action) { const { payload: newDate } = action; if (!newDate) return; try { // dispatch all required actions yield all([ put(getApps(newDate), put(getPlatforms(newDate), put(getNetworks(newDate)), put(getCountries(newDate)), put(getFormats(newDate)), put(getDevices(newDate)), put(getNetworkKeys(newDate)), ]); // then trigger a success action if you want to yield put(updateDataSuccess()); } catch (err) { // if something wrong happens in the try this will trigger yield put(updateDateFailure(err)); } } export default function* root() { yield all([ takeLatest(ActionTypes.UPDATE_DATE, updateDateWatcher), ]); } // --> Component <-- // import { updateDate } from './actions.js'; class MyComponent extends Component { componentDidMount() { const { onDateChange } = this.props; const date = new Date(); onDateChange(date); // -> triggers ActionTypes.UPDATE_DATE } } const mapDispatchToProps = dispatch => ({ onDateChange: (newDate) => dispatch(updateDate(newDate)), }); export default connect(null, mapDispatchToProps)(MyComponent);