Question

我的母语不是英语。因此，我会尽力清楚地表达问题！我想使用store.dispatch，所以我要这样做（从“ ../index”中导入{store};）

index.js

import reducers from "./reducer";
 
const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.devToolsExtension?window.devToolsExtension():f =>f
) )

reducer.js

import { combineReducers } from "redux";
import { user  } from "./redux/user.redux";

 
export default combineReducers({
    user
})

user.js

import axios from "axios"

import { store } from "../index";

const dispatch = store.dispatch;
export function register ({user, pwd, repeatpwd, type }) {
  
    axios.post("/user/info", {user, pwd, type}).then ( (res) => {
        if (res.status == 200 && res.data.isAuth === 0) {
           dispatch( registerSuccess({user, pwd, type}))
        } else {
           dispatch( errorMsg(res.data.msg));
        }
    })
}

为什么商店未定义？路径正确。

Answer 1

要在另一个模块中访问变量或模块，必须正确导出它。

使用ES6标准import/export关键字时，有两种将上下文从一个模块导出到另一个模块的方法：

export default-这样，您只能在一个模块中导出一件事，并且它将在另一个导入中表示为名称空间。通过提供路径并任意命名来导入它（可以根据需要命名导入变量）
命名为export：export variable，它允许从一个文件中导出多个变量。通过在大括号中提供其他模块的确切变量名来导入（或导入所有内容）。如果要更改变量名称，则必须为其加上别名。

两种导出类型可能共存，例如您可以对文件中的主要元素使用default导出，对较小的元素可以使用named exports。

默认导出示例：

// index.js
export default createStore({/.../});

// user.js
import store from '../index';
// store will be available here

命名导出的示例（提供您的user.js代码，这可能就是您想要的）：

// index.js - notice the difference!
export const store = createStore({/.../});

// user.js - notice the brackets!
import { store } from '../index';
// store will be available here

如果您开始前端冒险可能会有些混乱，所以我强烈建议阅读该文章-https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Uncaught TypeError：无法读取未定义的属性“ dispatch”？为什么？

1 个答案: