Question

我有一个表单输入验证函数，只返回空错误对象或填充错误对象。

const validate = function validateSomeInput({ field1, field2 }) {
  const errors = {}
  // some logic
  return errors
}

export default validate

有没有办法将动作创建者挂钩到此功能中？

这就是我想要实现的目标：

const validate = function validateSomeInput({ field1, field2 }) {
  const errors = {}
  // some logic
  props.onErrorEvent('do something')
  return errors
}

export default connect(null, { onErrorEvent })(validate)

我的问题是，因为它不是一个类，所以我无法访问this.props，而且在之前我从未尝试过制作容器渲染任何JSX 。

我也无法在父级中创建回调，因为验证功能由Redux-Form控制。

在父容器中使用它是这样的：

export default compose(
  connect(mapStateToProps, {
    onErrorEvent,      // this is the action creator I want to access from validate
    onLoginSuccess,
  }),
  graphql(LOGIN_MUTATION),
  reduxForm({
    validate,           // how do I get an action creator into this function?
    form: 'LoginForm',
  }),
)(LoginForm)

是否可以将动作创建者连接到不呈现JSX并且无法回调父级的实用程序函数中？

我也想知道这是否接近任何可怕的反模式领域，因为我找不到任何关于允许随机效用函数调用动作创建者的信息。

我没有看到bindActionCreators的解决方案，但也许我只是没看到它与这种情况的关系。

我可以在这种情况下创建HOC吗？

Answer 1

validate函数接收第二个参数，它们是组件props。这使传递调度绑定的动作创建者变得微不足道。有关详细信息，请参阅docs，但如果您检查第二个参数，则代码示例应该有效：

function validate({ field1, field2 }, {onErrorEvent}) {
  // ...
}

export default compose(
  connect(mapStateToProps, {
    onErrorEvent,      // this is the action creator I want to access from validate
    onLoginSuccess,
  }),
  graphql(LOGIN_MUTATION),
  reduxForm({
    validate,           // how do I get an action creator into this function?
    form: 'LoginForm',
  }),
)(LoginForm)

如果要将验证功能与操作隔离，请使用以下模式：

function sendOnError(validate, fields, props) {
  const result = validate(fields, props);
  if (!_.isEmpty(result)) {
    props.onErrorAction(...);
  }
  return result;
}

const myValidator = ({field1, field2}) => ...;

export default compose(
  connect(mapStateToProps, {
    onErrorEvent,      // this is the action creator I want to access from validate
    onLoginSuccess,
  }),
  graphql(LOGIN_MUTATION),
  reduxForm({
    validate: sendOnError.bind(null, myValidator),
    form: 'LoginForm',
  }),
)(LoginForm)

Answer 2

您可以直接访问redux商店。

第1步：导出商店

在您最初配置商店的文件中，请确保将其导出，以便您可以从应用内的任何位置引用它：

import {createStore} from 'redux'

const store = createStore([... your config]);

export default store;

第2步：在代码中的任意位置使用

import {reduxStore} from './store'; // your previous created file

const yourEntireReduxState = reduxStore.getState();
// use it whichever way you want here

第3步：派遣行动

import {reduxStore} from './store'; // your previous created file

store.dispatch({type: 'YOUR_ACTION', payload: {...}});

Answer 3

Redux Thunk将是一个很好的方法。它是一个中间件，允许您编写返回功能的动作创建者，允许您访问商店，并允许您从动作创建者发送其他动作。

＆＃13;

import { onErrorEvent } from '../wherever';

const validate = function validateSomeInput({ field1, field2 }) {
  return function(dispatch, getState) {
    const errors = {}
    // some logic
    dispatch(onErrorEvent('do something'))
    return errors
  }
}

＆＃13;

在React中，是否可以从实用程序函数中访问Redux动作创建者？

3 个答案: