reactjs - 在 React 中，是否可以从实用函数内部访问 Redux 操作创建者？

Question

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

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

export default validate

有没有办法将 Action 创建者挂接到这个函数中？

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

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

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

我的问题是，由于它不是一个类，我无权访问this.props，并且在此之前我从未尝试过创建容器< strong>不渲染任何 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)

Is it possible to wire an action creator into a utility function that doesn't render JSX and can't callback to parent?

我还想知道这是否与任何可怕的反模式领域接壤，因为我找不到任何有关允许随机实用函数调用 Action 创建者的信息。

我没有看到 bindActionCreators 的解决方案，但也许我只是没有看到它与此场景有何关系。

有没有办法在这种情况下创建 HOC？

Answer 1

您可以直接访问 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 步:分派(dispatch)操作

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

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