javascript - 如何将 Action 创建者分离到单独的文件中?

标签 javascript reactjs redux

我正在尝试将我的 Action 创建器放入一个单独的文件中。我收到错误

Error dispatch is not defined.

//AddNewNote.js

// AddNewNote class is here

const mapDispatchToProps = dispatch => ({
  actionNoteCreate: actionNoteCreate,
});

export default connect(null, mapDispatchToProps)(AddNewNote);

//noteActions.js

import actionTypes from '../constants/actionTypes';

export const actionNoteCreate = (text) => {
  dispatch({
    type: actionTypes.NOTE_CREATE,
    payload: text,
  });
};

最佳答案

调度应该位于您的mapDispatchToProps内并从您的actionCreator中删除:

const mapDispatchToProps = dispatch => ({
  actionNoteCreate: text => dispatch(actionNoteCreate(text)),
});

export default connect(null, mapDispatchToProps)(AddNewNote);

但是,最好的方法可能是简单地使用 mapDispatchToProps 中的对象:

const mapDispatchToProps = {
    actionNoteCreate
};

react-redux会自动用dispatch包装它。

"[mapDispatchToProps(dispatch, [ownProps]):dispatchProps](对象或函数):如果传递一个对象,则其中的每个函数都被假定为 Redux action 创建者。具有相同函数名称的对象,但每个 Action 创建者都包含在调度调用中,因此它们可以直接调用,并将合并到组件的 Prop 中。” https://github.com/reactjs/react-redux/blob/master/docs/api.md

关于javascript - 如何将 Action 创建者分离到单独的文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49085581/

相关文章:

javascript - 图像背景已经改变,我可以将它调整到浏览器窗口并淡入淡出吗

javascript - WebApi 到 Angular 属性键全部都是小写?

javascript - 使用 Promise 设置状态

reactjs - axios catch 不捕获错误

javascript - 错误模块构建失败 : SyntaxError: Unexpected token

javascript - AngularJS:如何制作一个波动的进度条?

javascript - 如何让我的 JQueryUI 可拖动元素 float 到另一个溢出元素中?

javascript - 如何在 JSX for Atom 的 .js 文件中启用 HTML 标签的自动完成?

reactjs - 用react-transition-group左右滑动

javascript - React Redux,在获取数据并将其映射到组件后重新渲染?