未捕获的错误：操作必须是普通对象

Posted 2023-02-22

【中文标题】未捕获的错误：操作必须是普通对象

【英文标题】：Uncaught Error: Actions must be plain objects

【发布时间】：2018-03-22 09:46:33

【问题描述】：

我已经用这个标题解决了所有问题，但我找不到防止这个错误的解决方案。到目前为止，我所做的是确保我不会混淆新旧 redux api，我正在使用 babel 进行编译，因此不适用打字稿解决方案，我确保我在有问题的操作中返回了一个函数，我'已经注释掉了我的导入或 thunk 以确保它中断，并且我在导入它后注销了 thunk，我得到了一个功能，并且我已经从 deprecated 版本更新了 devtools 扩展。没有成功。任何帮助深表感谢。相关代码如下：

商店：

const redux = require('redux');
const combineReducers, createStore, compose, applyMiddleware = require('redux');
import default as thunk from 'redux-thunk';

const nameReducer, hobbyReducer, movieReducer, mapReducer = require('./../reducers/index');

export const configure = () => 

    const reducer = combineReducers(
        name: nameReducer,
        hobbies: hobbyReducer,
        movies: movieReducer,
        map: mapReducer
    );

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));   

    return store;
;

动作：

export let startLocationFetch = () => type: 'START_LOCATION_FETCH';

export let completeLocationFetch = (url) => type: 'COMPLETE_LOCATION_FETCH', url;

export let fetchLocation = () => (dispatch, getState) => 
    dispatch(startLocationFetch());

    axios.get('http://ipinfo.io').then(function(res) 
        let loc = res.data.loc;
        let baseURL = 'http://maps.google.com?q=';

        dispatch(completeLocationFetch(baseURL + loc));
    );
;

发送动作的代码：

console.log('starting redux example');

const actions = require('./actions/index');
const store = require('./store/configureStore').configure();

let unsubscribe = store.subscribe(() => 
    let state = store.getState();

    if(state.map.isFetching)
        document.getElementById('app').innerhtml = 'Loading...';
     else if(state.map.url)
        document.getElementById('app').innerHTML = '<a target=_blank href = "' + state.map.url + '">Location</a>';
    
);



store.dispatch(actions.fetchLocation());

我现在正在学习 React/Redux（这是一门课程），所以我真的可能遗漏了一些明显的东西。如果我遗漏了一些相关的内容，请告诉我。谢谢

【问题讨论】：

您也可以将import default as thunk from 'redux-thunk'; 替换为import thunk from 'redux-thunk'; 导入时不使用花括号，默认导出保存在您在此处选择的任何名称（在本例中为thunk）。

@cfraser 这很有趣。在docs 中，它说“如果您在 CommonJS 环境中使用 Redux Thunk 2.x，请不要忘记将 .default 添加到您的导入中”当我使用 2.1 时，我假设需要导入或需要专门使用 .default，但我只是尝试了你所说的没有错误。我想知道为什么它明确说明但不需要。

因为那不是 CommonJS，而是 ES5。 CommonJS 将使用var x = require ('something').default。

是的，当然。谢谢！

【参考方案1】：

export let startLocationFetch = () => type: 'START_LOCATION_FETCH';

没有返回对象，而是应该导致语法错误。

要直接从箭头函数返回对象，需要设置括号，否则会被解释为块：

export let startLocationFetch = () => (type: 'START_LOCATION_FETCH');

---

编辑：感谢 Nicholas 指出确实不是语法错误。

【讨论】：

should rather result in a syntax error. 值得注意的是，它是有效的语法！ type: 被解释为标签语句，然后是字符串表达式。多么阴险……

是的！非常感谢。我很高兴它是这样的，而不是 redux/thunk 部分。

【参考方案2】：

export let startLocationFetch = () => type: 'START_LOCATION_FETCH';

export let completeLocationFetch = (url) => type: 'COMPLETE_LOCATION_FETCH', url

我认为这些行是问题所在。函数的简短语法效果很好，但要返回一个对象，你应该用括号括起来，像这样：

export let startLocationFetch = () => (type: 'START_LOCATION_FETCH');

export let completeLocationFetch = (url) => (type: 'COMPLETE_LOCATION_FETCH', url)

所以转译器知道接下来是一个必须返回的参数，而不是函数体。