Fehler: Aktionen müssen einfache Objekte sein, benutzerdefinierte Middleware für asynchrone Aktionen verwenden

Question

Ich habe ein paar Tage damit verbracht, nach der Antwort zu suchen, und ich weiß immer noch nicht, was ich falsch mache. Ich habe andere Projekte auf die gleiche Art und Weise eingerichtet, die Daten aus der API holen. Alle anderen Antworten haben die Variationen davon, wie die Aktionen müssen Objekte zurück, die so weit wie ich meine sind

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')); 

Komponente Aufruf 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); 

Reducer sagen kann:

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; 

Aktion Schöpfer:

Ich habe diese Axios Api Anfrage funktioniert mit reactive this.state, wo ich es einfach in Komponente legte montieren. Wenn jemand sehen kann, wo ich falsch liege, würde es mir sehr helfen.

Answer 1

Ok, also sieht es so aus, als hätte ich eine frühere Version von redux benutzt, die die Version von redux-thunk, die ich installiert hatte, nicht mochte! Ich aktualisierte auf die neueste Version von Redux und es ruft jetzt wie es sollte.

Ich bin mir immer noch nicht sicher, warum die anderen Projekte, die die ältere Version installiert haben, immer noch funktionieren ...