Question

我想使用redux-thunk进行redux异步操作，但redux返回错误：＆＃39; Actions必须是普通对象。使用自定义中间件进行异步操作。＆＃39;

我没有使用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对象。动作必须具有类型指示正在执行的操作类型的属性。类型通常应定义为字符串常量。一旦你的应用程序足够大，您可能想将它们移动到一个单独的模块中。

这来自redux docs。您的问题似乎是您的操作返回的不是对象。

只是为了澄清一点。该操作应该只是返回一个对象，该对象至少具有传递给reducer的type属性。如果要使用thunk来处理异步流，则应在调用操作之前执行此操作。流程将更像这样。从您连接的组件调用redux thunk，然后thunk调度该动作并将其传递给它可能需要的任何有效负载。最后，该操作将仅返回一个对象，并且没有自己的逻辑。

Redux返回错误＆＃39; Actions必须是普通对象。使用自定义中间件进行异步操作。＆＃39;即使中间件已定义

1 个答案: