錯誤：操作必須是普通對象，使用自定義中間件進行異步操作

我花了幾天的時間尋找這個答案，但我仍然不知道自己做錯了什麼。我有其他項目設置完全相同的方式，從api的罰款提取數據。所有其他的答案說的行爲如何需要返回對象，據我可以告訴我的是錯誤：操作必須是普通對象，使用自定義中間件進行異步操作

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import { createLogger } from 'redux-logger'; 
import Thunk from 'redux-thunk'; 
import reducer from './reducers/reducer'; 
import App from './App'; 

import './css/index.css'; 
import './css/font-awesome.css'; 
import './css/bulma.css'; 

const logger = createLogger(); 
const store = createStore(reducer, applyMiddleware(Thunk, logger)); 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, document.getElementById('root'));

組件調用mapDispatchToProps變化

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { searchRepositories } from '../actions/searchActions'; 

class Results extends Component { 

    componentDidMount() { 
    this.props.searchRepositories(); 
    } 

    render() { 
    return (
     <div>Some Stuff</div> 
    ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    searchRepositories:() => { 
     dispatch(searchRepositories()); 
    }, 
    }; 
}; 

const mapStateToProps = (state) => { 
    return { 
    repositories: state.repositories, 
    }; 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(Results);

減速機：

import * as types from '../actions/types'; 
import initialState from './INITIAL_STATE'; 


function reducer(prevState = initialState, action) { 
    if (!action) return prevState; 

    switch (action.type) { 
    case types.FETCH_REPOS_REQUEST: 
     return { ...prevState, loading: true }; 

    case types.FETCH_REPOS_SUCCESS: 
     return { 
     ...prevState, 
     loading: false, 
     repositories: action.data, 
     error: '', 
     }; 

    case types.FETCH_REPOS_ERROR: 
     return { ...prevState, error: 'Encountered an error during GET request' }; 

    default: 
     return prevState; 
    } 
} 

export default reducer;

動作創建者：

import axios from 'axios'; 
import * as types from './types'; 
import { ROOT } from '../config'; 


export function searchRepositoriesRequest() { 
    return { 
    type: types.FETCH_REPOS_REQUEST, 
    }; 
} 

export function searchRepositoriesSuccess(repositories) { 
    return { 
    type: types.FETCH_REPOS_SUCCESS, 
    data: repositories, 
    }; 
} 

export function searchRepositoriesError(error) { 
    return { 
    type: types.FETCH_REPOS_ERROR, 
    data: error, 
    }; 
} 

export function searchRepositories() { 
    return function (dispatch) { 
    dispatch(searchRepositoriesRequest()); 
    return axios.get(`${ROOT}topic:ruby+topic:rails`).then((res) => { 
     dispatch(searchRepositoriesSuccess(res.data)); 
    }).catch((err) => { 
     dispatch(searchRepositoriesError(err)); 
    }); 
    }; 
}

我已經得到了這個axios api請求工作使用react this.state，我只是把它放在組件安裝。如果任何人都能看到我要出錯的地方，那會對我有所幫助。

來源

2017-08-01 biwhitfield

好吧，看起來我使用的是早期版本的redux，我安裝的redux-thunk版本不喜歡！我更新到最新版本的redux，現在它應該調用它。

我還不確定爲什麼其他安裝了舊版本的項目仍然可以正常工作...

來源

2017-08-01 16:36:15 biwhitfield

錯誤：操作必須是普通對象，使用自定義中間件進行異步操作

回答

相關問題