reactjs - 如何将 redux-form 的 onSubmit 与 redux-api-middleware 集成？

Question

我正在使用 redux-form 编写 React/Redux 应用程序和 redux-api-middleware ，并且我在将 redux-form 的 onSubmit 函数与 RSAA 生命周期集成时遇到了问题。

redux-form 文档说 onSubmit 处理程序 should return一个 promise 。在对 Promise 调用 resolve 之前，表单的 submitting 属性将为 true。

但是，在此应用程序中，我的 API 调用当前不使用 promise (例如通过 fetch)。我通过调度 [CALL_API] RSAA 操作和 reducing redux-api-middleware's response actions. 来进行 API 调用

问题代码

class MyReduxFormContainer extends Component {
  render() {
    return (
      <MyReduxForm submit={this.props.submit} />
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    submit: function(values, dispatch) {
      dispatch({
        [CALL_API]: {
          method: 'PATCH',
          types: [
            {
              type: 'REQUEST',
              endpoint: '...',
              body: JSON.stringify(values)
            },
            'SUCCESS',
            'FAILURE'
          ]
        }
      });
      // Problem: redux-api-middleware-style API calls normally don't leverage promises.
      // Out of the box, this library doesn't offer a promise to return.
    }
  }
};

export default connect(
  // ...
  mapDispatchToProps
)(MyReduxFormContainer)

可能的解决方案

我可以通过payload RSAA回调传递一个 promise ，然后它可以在API响应后解析/拒绝该 promise ，但这似乎违反了< em>“ Action 创建者不应该引起副作用。”承认 redux-api-middleware 似乎违反了这条规则。

理论上我可以在 onSubmit 处理程序中使用 fetch，而不是 redux-api-middleware，但这不仅仅是这是一个让步，这使得我的 API 交互在应用程序中不一致，而且还存在重复我所参与的任何 API 中间件事件的风险，例如设置默认 header 、去驼峰化/驼峰化负载等。

有人有一起使用 redux-form 和 redux-api-middleware 的经验吗？

如果只是 redux-api-middleware，我本希望在减少 ACTION_TYPE_ 时通过更改表单的状态来简单地更改表单的 submitting 属性[REQUEST|SUCCESS|FAILURE] 操作类型。但直接从 reducer 修改表单状态似乎是不标准的并且存在潜在风险。示例 redux-form 实现似乎强调 redux-form 状态应该是透明的/只能间接操纵。

任何想法/指示将不胜感激!

相关 GitHub 问题

redux-api-中间件:

• https://github.com/agraboso/redux-api-middleware/issues/21
• https://github.com/agraboso/redux-api-middleware/issues/53

redux 形式:

• https://github.com/erikras/redux-form/issues/777

Answer 1

最近我发现了相当优雅和通用的方式来结合它。 Here is article with explanation

export const formToApiAdapter = (dispatch, actionCreator, formatErrors) => (
  (...args) => (
    new Promise((resolve, reject) => (
      dispatch(actionCreator(...args)).then(
        (response) => {
          if (response.error) {
            return reject(formatErrors(response));
          }
          return resolve(response);
        }
      )
    ))
  )
);