javascript - "Cannot read property ' 在 redux store 中输入 ' of undefined"用于外部包中定义的操作

Question

作为我正在进行的学习 React 项目的一部分(我天生就是一个 ASP.NET 人)，我遇到了这个问题。我有一套 React 应用程序，我想在其中使用一些常见的 UI 元素，所以我试图将它们分解成一个单独的 npm 包。对于共享组件本身，这工作得很好。

然而，其中一些组件依赖于 redux Action 来运行，所以我尝试将这些 Action 和一个 reducer 函数捆绑到外部包中。这是我的 actions\index.js 的简化版本:

export const SNACKBAR_MESSAGE = "SNACKBAR_MESSAGE";
export const SNACKBAR_HIDE = "SNACKBAR_HIDE";

export function showSnackBarMessage(message) {
    console.log('hit 1');
    return (dispatch, getState) => {
        console.log('hit 2');
        dispatch(hideSnackBar());
        dispatch({
            type: SNACKBAR_MESSAGE,
            message: message
        });
    }
}

export const hideSnackBar = () => {
    type: SNACKBAR_HIDE
};

这是reducer\index.js:

import { 
    SNACKBAR_MESSAGE,
    SNACKBAR_HIDE
} from "../actions";

const initialState = {
    snackBarMessage: null,
    snackBarVisible: false
};

export default function UiReducer(state = initialState, action) {
    switch(action.type) {
        case SNACKBAR_MESSAGE:
            return Object.assign({}, state, { 
                snackBarMessage: action.message,
                snackBarVisible: true
            });
        case SNACKBAR_HIDE:
            return Object.assign({}, state, { 
                snackBarMessages: '',
                snackBarVisible: false
            });
        default:
            return state;
    }
}

这与作为原始项目的一部分时运行良好的代码相同。这些由我的包的入口点文件导出，如下所示:

// Reducer
export { default as uiReducer } from './reducer';

// Actions
export { showSnackBarMessage as uiShowPrompt } from './actions';
export { hideSnackBar as uiHidePrompt } from './actions';

然后在我的消费项目中，我的默认 reducer 如下所示:

import { routerReducer } from 'react-router-redux';
import { combineReducers } from 'redux';
import { uiReducer } from 'my-custom-ui-package';
// Import local reducers

const reducer = combineReducers(
  {
    // Some local reducers
    ui: uiReducer
  }
);

export default reducer;

问题是当我尝试分派(dispatch)从我的外部包导入的这些操作之一时。我包括 Action ，例如import { uiShowPrompt } from "my-custom-ui-package"; 并像 dispatch(uiShowPrompt("Show me snackbar")); 一样发送它然后我看到两个显示控制台消息(hit 1 和 hit 2)，但随后出现以下错误:

Uncaught TypeError: Cannot read property 'type' of undefined

at store.js:12
at dispatch (applyMiddleware.js:35)
at my-custom-ui-package.js:1
at index.js:8
at middleware.js:22
at store.js:15
at dispatch (applyMiddleware.js:35)
at auth.js:28
at index.js:8
at middleware.js:22

商店本身看起来像这样:

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
import { browserHistory } from "react-router";
import {
  syncHistoryWithStore,
  routerReducer,
  routerMiddleware
} from "react-router-redux";
import reducer from "./reducer";

const loggerMiddleware = store => next => action => {
    console.log("Action type:", action.type);
    console.log("Action payload:", action.payload);
    console.log("State before:", store.getState());
    next(action);
    console.log("State after:", store.getState());
};

const initialState = {};

const createStoreWithMiddleware = compose(
  applyMiddleware(
    loggerMiddleware, 
    routerMiddleware(browserHistory), 
    thunk)
)(createStore);

const store = createStoreWithMiddleware(reducer, initialState);

export default store;

恐怕我不明白这个错误。除了本质上将相同的代码从我的本地项目移动到 npm 包之外，我没有看到我在做什么不同。由于操作和 reducer 实际上都不依赖于 redux，所以我的 npm 包本身并不依赖于 react-redux。那是问题吗？如果还有什么我可以分享来帮助你帮助我的，请告诉我。就像我说的，我对这一切还很陌生，所以很明显有些事情我做错了!

Answer 1

问题可能出在hideSnackBar函数的声明上

export const hideSnackBar = () => {
    type: SNACKBAR_HIDE
};

这里的函数试图从箭头函数返回一个对象文字。这将始终返回 undefined。由于解析器不会将两个大括号解释为对象文字，而是将其解释为 block 语句。因此，错误，无法读取未定义的属性“类型”，因为商店期望具有属性类型的操作。

像这样替换代码，看看它是否有效。

export const hideSnackBar = () => ({
    type: SNACKBAR_HIDE
});

括号强制它解析为对象文字。希望这有帮助