reagieren und redux: Uncaught Error: Erwartet, dass der Reducer eine Funktion sein

Question

Gehen durch Udemy Tutorial und stecken geblieben und aus irgendeinem Grund kann nicht herausfinden, was happed. Ich habe meinen gesamten Code durchgegangen und es sieht soweit ich es beurteilen kann im Vergleich zum Tutorial aus. Code:

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 

import ReduxPromise from 'redux-promise'; 

import App from './components/app'; 
import reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <App /> 
    </Provider> 
    , document.querySelector('.container')); 

searchbar.js:

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import {fetchWeather} from '../actions/index'; 
export default class SearchBar extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = {term: ''} 
     this.onInputChange = this.onInputChange.bind(this) 
    } 
    onInputChange(e){ 
     console.log(e.target.value) 
     this.setState({ 
      term: e.target.value 
     }) 
    } 
    onFormSubmit(e){ 
     e.preventDefault() 
    } 
    render(){ 

     return (

      <form onSubmit ={this.onFormSubmit} className = "input-group"> 
       < input 
       placeholder =" Get a forecast" 
       className = "form-control" 
       value = {this.state.term} 
       onChange = {this.onInputChange} 
       /> 
       <span className = "input-group-btn"> 
        <button type="submit" className = "btn btn-secondary">Submit </button> 
       </span> 
      </form> 
     ); 
    } 
} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators({fetchWeather}, dispatch); 
} 
export default connect (null, mapDispatchToProps)(SearchBar); 

Reduzierungen/index.js

import axios from 'axios'; 

const API_KEY = 'c4c2ff174cb65bad330f7367cc2a36fa' 
const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?q=appid=${API_KEY}`; 

export const FETCH_WEATHER = 'FETCH_WEATHER'; 

export function fetchWeather(city){ 
    let url = `${ROOT_URL}&q=${city},us`; 
    let request = axios.get(url); 

    return { 
     type: FETCH_WEATHER, 
     payload: request 
    }; 

} 

app.js

import React, { Component } from 'react'; 
import SearchBar from '../containers/search_bar'; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <SearchBar /> 
     </div> 
    ); 
    } 
} 

Answer 1

Um zu antworten,

Ihr Code wurde ein wenig durcheinander gebracht, der Block, den Sie in reducers/index.js haben, ist Ihre Aktion und sollte stattdessen in actions/index.js liegen. Wie bereits erwähnen Sie es von dort in Ihrer searchbar Komponente importieren:

import {fetchWeather} from '../actions/index';

Das Reduktions hier sollte die Verwendung der FETCH_WEATHER Art werden zu machen, die Sie in Ihrer Aktion, um den Zustand des Redux zu aktualisieren Einrichtung werden Geschäft, so etwas entlang der Linien von:

switch(action.type) { 
    case FETCH_WEATHER: 
     return [action.payload.data].concat(state); 
} 

return state; 

dann entweder den Export, die direkt oder Verwendung combineReducers von redux machen eine einzige Reduktions Funktion zurück, wenn Sie mehr als eine haben.

Link zur immer genial: DOCS