Wh gibt redux reducer ein leeres Objekt zurück?

-1

Hier ist mein Code:Wh gibt redux reducer ein leeres Objekt zurück?

Die Aktion Schöpfer

export function fetchHead() { 

    const url = HEAD_URL; 

    const request = axios.get(url); 

    return { 

    type: FETCH_HEAD, 

    payload: request 

    }; 
}

Der Reducer

import { FETCH_HEAD } from '../actions'; 

import _ from 'lodash'; 

export default function(state = {}, action) { 

    switch (action.type) { 

    case FETCH_HEAD: 

     return _.mapKeys(action.payload.data.articles, 'id'); 

    default: 

     return state; 
    } 

}

Reducer Schlüssel, versprechen

import { combineReducers } from 'redux'; 


import HeadReducer from './head_reducer'; 

const rootReducer = combineReducers({ 


    heads: HeadReducer 

}); 

export default rootReducer;

Komponente

import React, { Component } from 'react'; 

import { connect } from 'react-redux'; 

import { fetchHead } from '../actions'; 

class HeadNews extends Component { 

    componentDidMount() { 

    this.props.fetchHead(); 

    console.log(this.props.heads); 
    } 

    render() { 

    return <div>Hello</div>; 

    } 

} 

function mapStateToProps(state) { 

    return { heads: state.heads }; 

} 

export default connect(mapStateToProps, { fetchHead })(HeadNews);

Quelle

2017-09-14 RaMsIs

Sie die async der Netz- Anrufe fehlen, wird api Aufruf asynchron sein und es werden die Daten synchron nicht zurück, so dass Sie einige Middleware enthalten müssen wie 'Redux-thunk', Scheck diese Antworten: [Warum brauchen wir Middleware für asynchronen Fluss in Redux?] (https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux) und [Wie gebe ich die Antwort von einem asynchronen Anruf zurück?] (Https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –

Ich denke redux -Promise wird das lösen! – RaMsIs

Sie sind ein DEFFERED Objekt an den Druckminderer und nicht die Weitergabe von Daten zurückgegeben von der Ajax-Anfrage.
sollten Sie .then verwenden:

axios.get(url) 
     .then(function (response) { 
     return { 
      type: FETCH_HEAD, 
      payload: response 
     } 
     }) 
     .catch(function (error) { 
     console.log(error); 
     });

EDIT
Ich weiß nicht, ob Sie redux-thunkmiddleware sondern um verwenden Aktionen zu versenden, die wie eine Aktion sollte eine Funktion anstelle eines einfachen Objekt zurückgibt sein , müssen Sie redux-thunk verwenden.

Quelle

2017-09-14 19:20:21

Ich denke nicht, dass es das Problem des OP lösen wird, er braucht etwas Middleware wie 'Thunk'. –

danke, ja, ich habe die Antwort bearbeitet, obwohl ob das OP _redux-thunk_ verwendet oder nicht muss er ein einfaches Objekt als eine Aktion (die serialisiert werden kann) und nicht das Versprechen selbst zurückgeben. –

Gerade aber console.log unter Rendering funcnction:

componentDidMount() {

this.props.fetchHead();

}

render() {

console.log (this.props.heads);

return <div>Hello</div>;

}

Quelle

2017-09-16 20:10:45 RaMsIs

Wh gibt redux reducer ein leeres Objekt zurück?

Antwort

Verwandte Themen