创建一个 Redux-saga 监听器

Question

我对 redux saga 有一个 UPDATE_DATE 动作。每次修改日期时，我都想更新多个资源。我想实现一个侦听器来触发回调的操作 UPDATE_DATE_SUCCESS。任何想法？如果我能从 React 组件中调用它就太好了。

行动： UPDATE_DATE UPDATE_DATE_成功 UPDATE_DATE_失败

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 组件的理想实现

  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 而不是组件中处理 action/event 的 side-effects。我认为这样做的方式是这样的（注意片段代码未经过测试，仅将其用作 reference/example）：

// --> 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 监听器

Create a Redux-saga listener

javascript

reactjs

redux

redux-saga