Question

我已根据doc redux样板正确设置了。我有一个包含操作的各种操作文件的文件夹。在这个文件夹中，我创建了一个index.js，我将导出所有这些文件。我将其导入为命名导出。当我控制台记录功能本身时，它就在那里，但是当我控制台注销时this.props它不存在。我试图通过控制台注销其类undefined之外的函数。

如果我直接从文件中导入动作，则它在其中定义。

操作/ formActions.js

export const formInput = (key, val) => (
    {
        type: FORM_INPUT,
        payload: { key, val }
    }
);

操作/ index.js

export * from './formActions';

FormComp.js

import { formInput } from './actions'; //  <-- this.props.formInput = undefined

或

import { formInput } from './actions/formActions'; //  <-- this.props.formInput = func

连接：

class InputField extends Component { ... }

const FormComp = connect(({ forms }) => ({ forms }), { formInput })(InputField);

export { FormComp };

edit1：如果我在componentWillMount() console.log(formInput) //without this.props里面。

edit2（解决方案？）： 我能够使用bindActionCreators将动作映射到道具。我怎么不明白为什么我需要使用bindActionCreators以及为什么我不能只将导出连接作为第二个参数的动作。

const FormComp = connect(
  ({ forms }) => ({ forms }), 
  dispatch => bindActionCreators({ formInput }, dispatch)
)(InputField);

Answer 1

未定义seed.rb但定义this.props.formInput的原因是因为redux connect未正确设置函数formInput对照变量（属性）formInput组件道具。

formInput是您要导入的功能，
formInput是应该“指向”导入函数的属性。

尝试（为清晰起见，我已将其分开）

this.props.formInput

然后在您的代码中的任何地方调用

function mapStateToProps(state) {
    return {
      forms: state.forms
    }
  }
function mapDispatchToProps(dispatch) {
  return {
    formInput: (key, val) => dispatch(formInput(key val))
  };
}

export connect(
  mapStateToProps, 
  mapDispatchToProps
)(InputField);

这将通过道具调用动作，因此将发送。适当

Answer 2

您需要返回一个以dispatch和getState为参数的函数。

export const formInput = (key, val) => (dispatch, getState) => {
    // maybe additional stuff
    dispatch({
        type: FORM_INPUT,
        payload: { key, val }
    });
};

请参阅文档中的标题动作创作者：https://redux.js.org/docs/basics/Actions.html

Redux动作不存在

2 个答案: