如何从 mapDispatchToProps 内部访问状态

Question

需要根据 state 或 presentaional 组件的 props 调度一个动作。

const mapDispatchToProps = (dispatch) => {
  return {
    onClick: () => {
       if (state.someValue || this.props.someValue){
          dispatch({type: DO_SOMETHING})   
       }
    }

  }
}

并且这个动作应该被 redux-saga 拦截以执行一些远程抓取任务，所以我不能像这样将这个条件移动到 reducer 中：

const reducer = (state, action) => {
    switch (action.type){
       case DO_SOMETHING:
          if(state.someValue){
             return {...state, //do something}
             //I need to fetch some api here, so this won't be a valid way 
          }
    }
}

可以从 reducer 内部触发 dispatch 吗？这样 redux-saga 就可以拦截新的触发调度。

Answer 1

无法从 reducer 触发分派

如果检查状态必须由组件完成，则使用 third parameter of connect, aka mergeProps:

const mapStateToProps = state => ({
    someValue: // ...,
    // ...
})

const mapDispatchToProps = dispatch => {
  return {
    onClick: () => dispatch({type: DO_SOMETHING}),
    // ...
  }
}

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    const onClick = () => {
        if (stateProps.someValue) {
            dispatchProps.onClick();
        }
    }

    return ({
        ...stateProps,
        ...dispatchProps,
        onClick
    })
}

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)

如果检查状态不需要成为组件的一部分，则在 saga 任务中检查状态：

组件：

const mapDispatchToProps = dispatch => {
  return {
    onClick: () => dispatch({type: MAYBE_DO_SOMETHING}),
    // ...
  }
}

传奇：

function* onMaybeDoSomething(action) {
    const someValue = yield select(getSomeValue)

    if (someValue) {
        yield put({ type: DO_SOMETHING })
    }
}

export default function* () {
    takeLatest(MAYBE_DO_SOMETHING, onMaybeDoSomething)
}

如何从 mapDispatchToProps 内部访问状态

How to access state from inside mapDispatchToProps

reactjs

redux

redux-saga

react-redux