我怎样才能保证在React中链接一个redux / sagas派遣?

时间:2017-01-19 23:58:20

标签: reactjs redux redux-saga

在我的组件中,我有:

export default connect(
  (state) => ({
    autocomplete: state.autocomplete,
    search: state.search,
  }),
  (dispatch) => ({
    onSearch: (location) => (q) => dispatch(actions.push(getUrlWithQS(location, { qs: { q } }))),
    onAutocomplete: (q) => dispatch(actions.autocomplete({ q })),
  }),
  (stateProps, dispatchProps, ownProps) => ({
    ...stateProps,
    ...dispatchProps,
    ...ownProps,
    onSearch: dispatchProps.onSearch(ownProps.location),
  })
)(Home)

我也有:

  doSearch(location) {
    console.log(this.props.onSearch);
    this.props.onSearch(location)
  }

我是否可以将onSearch作出承诺,以便我知道派遣何时完成?

1 个答案:

答案 0 :(得分:2)

  

心理模型是一个传奇就像你的单独一个线程   应用程序单独负责副作用。

     

redux-saga提供了一些帮助效果,包含内部函数(takeLatest,takeEvery等),以便在将某些特定操作分派到商店时生成任务。

为了处理副作用,redux-saga允许您发送其他操作来处理错误或成功案例(这是您的行为承诺)。

要在操作后更新组件,componentWillReceiveProps(nextProps)允许您检测状态修改并在之后执行某些操作。

在传奇异步操作中,您可以使用putcall来获得所需的副作用。

来自documentation

的相关例子
import { call, put } from 'redux-saga/effects'

export function* fetchData(action) {
   let url = action.payload.url
   try {
      const data = yield call(Api.fetchUser, url)
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

在每个FETCH_REQUESTED操作上启动上述任务:

import { takeEvery } from 'redux-saga/effects'

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}