Question

我对redux传奇执行了UPDATE_DATE操作。我想在每次修改日期时更新多个资源。我想实现触发回调的动作UPDATE_DATE_SUCCESS的侦听器。任何想法？如果我可以从React组件中调用它，那将是很棒的。

操作：更新日期 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);

创建Redux-saga侦听器

2 个答案: