Redux返回錯誤'操作必須是普通對象。 使用自定義中間件進行異步操作。 即使中間件已定義

Question

我想使用redux-thunk進行redux異步操作，但redux返回錯誤：'actions必須是普通對象。 使用自定義中間件進行異步操作。

我沒有使用webpack，而不是我將所有js文件連接成一個文件。 我知道我的問題可能是由此引起的，但是現在我需要沒有webpack的解決方案，如果可能的話。

這是商店定義

const pricingStore = Redux.createStore(
    pricingReducer,
    Redux.applyMiddleware(window.ReduxThunk.default)
    // using UMD redux-thunk from https://npmcdn.com/redux-thunk@2.0.1/dist/redux-thunk.min.js
);

const {Provider} = ReactRedux;

$(document).ready(() => {
    const pricingContainer = document.getElementById('containerPricing');

    if (pricingContainer) {
        parsePricingData();
        const render = () => {
            ReactDOM.render(
                <Provider store={Redux.createStore(pricingReducer)}>
                    <Pricing />
                </Provider>,
                pricingContainer
            );
        };

        render();
        pricingStore.subscribe(render);
    }
});

這是行動

function uploadInvoices() {
    console.log('works here');

    return function () {
        console.log('doesnt log this msg');

        return null;
    };
}

這是行動召喚

const { connect } = ReactRedux;

let FileUpload = ({dispatch}) => {
    return (
        <input type="file" name="image" multiple onChange={(e) => dispatch(uploadInvoices())} />
    );
};

FileUpload = connect()(FileUpload);

請幫我解決問題

Answer 1

操作是純JavaScript對象。 操作必須具有指示正在執行的操作類型的type屬性。 通常應將類型定義為字符串常量。 一旦您的應用程序足夠大，您可能希望將它們移動到單獨的模塊中。

這來自redux文檔。 您的問題似乎是您的操作返回的不是對象。

只是為了澄清一點。 該操作應該只是返回一個對象，該對象至少具有傳遞給reducer的type屬性。 如果要使用thunk來處理異步流，則應在調用操作之前執行此操作。 流程將更像這樣。 從您連接的組件調用redux thunk，然后thunk調度該動作並將其傳遞給它可能需要的任何有效負載。 最后，該操作將僅返回一個對象，並且沒有自己的邏輯。