Question

我有这个代码为我的API返回一个thunk

import { SUBSCRIBE_REQUEST, SUBSCRIBE_SUCCESS, SUBSCRIBE_FAILURE } from '../../constants'

export function subscribeUser (data) {
  return (dispatch, getState, { axios }) => {

    dispatch({ type: SUBSCRIBE_REQUEST })
    return axios.get(`some/api/call`, data)
      .then(res => {
        dispatch({
          type: SUBSCRIBE_SUCCESS,
          payload: res.data
        })
      })
      .catch(error => {
        dispatch({
          type: SUBSCRIBE_FAILURE,
          payload: error,
          error: true
        })
      })
  }
}

我现在正在实施react-redux-form，并且不清楚如何将上述内容与提交功能联系起来。从他们的文档中，我希望我在提交动作中传递一个承诺：

class myForm extends React.Component {

  handleSubmit (data) {
    const { dispatch } = this.props   
    dispatch(actions.submit('user', somePromise))

  }

基本上类似于：

 dispatch(actions.submit('user', subscribeUser))

如何将我的thunked API代码与提交处理程序连接？我已经看过redux-promise作为一种可能性，虽然我不清楚它是否会解决我的问题，并且如果我可以使用它还希望保留现有的thunk代码库。

Answer 1

注意：该示例使用React-Native，但它作为React组件工作，因为reducers和actions是相同的。

使用react-redux，您可以使用connect将actions和props的{{1}}链接到您想要的reducers 使用class，您可以将操作绑定到您的操作。看起来会那样

redux

基本上，这会在组件周围放置一个高阶组件

Answer 2

请参阅此处给出的答案：https://github.com/davidkpiano/react-redux-form/issues/449

从react-redux-form提交处理程序调用thunk

2 个答案: