React redux - 动作

Question

最近在尝试redux，看到一个非常好的文件夹结构项目，我试图弄到相同的结构，但是同样的方法不行...

例如我有一个类似这样的路径：./src/_actions 并且在这个文件夹中我有“user.actions.js”、“alert.actions.js”、“index.js”。

在 alert.actions.js 我有类似的东西：

import { alertConstants } from "../_constants/alert.constants";

export const alertActions = {
  success,
  error,
  clear,
};

function success(message) {
  return { type: alertConstants.SUCCESS, message };
}

function error(message) {
  return { type: alertConstants.ERROR, message };
}

function clear() {
  return { type: alertConstants.CLEAR };
}

而且我很想将它们全部从一个地方导入到路径为“./../test.js”的文件夹：

import {alertActions} from "./../_actions";
import {useDispatch} from "react-redux";

export const test = () => {
const dispatch = useDispatch();

return (
<button onClick={() => dispatch(alertActions.success("test"))}> Click </button>
)

}

但我得到类似“alertActions.success”的未定义信息。我不知道我做错了什么。在那个项目中，index.js 也为空...该对象应该导出所有功能..有人知道任何解决方案吗？ :(

Answer 1

函数制作完成后需要导出对象。通常它们会被提升，但在这种情况下，您可能正在使用严格模式，而它们却没有。您必须移动导出对象或更好地单独导出所有这些对象，然后在导入它们时您应该写：

import * as alertActions from 'youfile'

如果您想导出整个对象，您应该将其导出为：

export default alertActions

然后您需要像这样导入它们：

import alertActions from 'yourfile'

并访问它们：

alrtActions.error()

React redux - 动作

React redux - actions

action

structure

reactjs

redux