Question

我已经用这个标题倾注了所有问题，我找不到可以防止此错误的解决方案。我到目前为止所尝试的是确保我不会混淆新旧redux api，我正在使用babel进行转换，所以没有打字原则解决方案适用，我已经确保我在相关动作中返回一个函数，我已经注释掉我的导入或thunk以确保它中断并且我在导入它之后注销了thunk并且我得到了一个函数，并且我已经从depricated版本更新了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（这是一门课程）所以我真的可能会错过一些明显的东西。如果我遗漏了相关的内容，请告诉我。感谢

Answer 1

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

不返回对象~~，但应该导致语法错误~~。

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

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

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

Answer 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})

因此，转换器知道下一个是必须返回的单个参数，而不是函数体。

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

2 个答案: