2017-10-08 7 views
0

Ich versuche, einige Daten aus meiner API mit Redux-Saga zu holen. Leider scheitert es und ich bekomme Uncaught TypeError: this.props.fetchData is not a function. Auch this.props.someInfo ist nicht definiert. Da ich ein Konsolenprotokoll mache, sah ich, dass die Funktion getData nicht eingegeben wurde. Ich glaube, dass es bedeutet, dass es ein Problem mit dem Abfeuern der Handlung gibt. Leider habe ich keine Ahnung, was falsch sein könnte oder wie ich es beheben könnte.Redux Saga, Problem mit Connect()

createStore.js

import {createStore, applyMiddleware, compose} from 'redux'; 
import createSageMiddleware from 'redux-saga'; 

import rootReducer from '../reducers/index'; 
import rootSaga from './rootSaga'; 
// import {rootSaga} from '../sagas/FAQSaga'; 

const sagaMiddleware = createSageMiddleware(); 

export default function configureStore(initialState) { 
    const middleware = applyMiddleware(sagaMiddleware); 
    const store = createStore(
     rootReducer, 
     compose (
      middleware, 
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // for displaying in google dev tools 
     ) 
    ); 

    sagaMiddleware.run(rootSaga); 

    return store; 
}; 

rootSaga.js

import { fork } from 'redux-saga/effects'; 
import FAQSaga from '../sagas/FAQSaga.js'; 

export default function * rootSaga() { 
    yield [ 
     fork(FAQSaga) 
    ]; 
} 

FAQSaga.js

import * as actions from '../actions/FAQActions'; 
import axios from 'axios'; 
import { call, put, take, fork } from 'redux-saga/effects'; 

export function* getData() { 
    try { 
     console.log('getdata'); 
     const response = yield call(axios.get, 'http://localhost:8080/rest/book/all'); 
     const data = yield response.json(); 
     yield put(actions.GET_FAQ.SUCCESS(data)); 
    } catch (e) { 
     console.log('erorr'); 
     console.log(e); 
     yield put(actions.GET_FAQ.FAILURE(e)); 
    } 
} 

export function* watchData() { 
    console.log('watchData'); 
    while (true) { 
     console.log('true'); 
     yield take(actions.GET_FAQ.REQUEST); 
     yield fork(getData); 
    } 
    // yield takeEvery(actions.GET_FAQ.REQUEST, getData); 
} 

function * FAQSaga() { 
    console.log('FAQSaga'); 
    yield [ 
     fork(watchData) 
    ]; 
} 

export default FAQSaga; 

FAQActions.js

import {REQUEST, SUCCESS, FAILURE, action} from './helpers'; 

const GET_FAQ_BASE = 'GET_FAQ_'; 
export const GET_FAQ = { 
    REQUEST: GET_FAQ_BASE + REQUEST, 
    SUCCESS: GET_FAQ_BASE + SUCCESS, 
    FAILURE: GET_FAQ_BASE + FAILURE 
}; 

const POST_FAQ_BASE = 'POST_FAQ_'; 
export const POST_FAQ = { 
    REQUEST: POST_FAQ_BASE + REQUEST, 
    SUCCESS: POST_FAQ_BASE + SUCCESS, 
    FAILURE: POST_FAQ_BASE + FAILURE 
}; 

export const getFAQ = { 
    request:() => action(GET_FAQ.REQUEST), 
    success: response => action(GET_FAQ.SUCCESS, {response}), 
    failure: error => action(GET_FAQ.FAILURE, {error}) 
}; 

export const postFAQ = { 
    request: data => action(POST_FAQ.REQUEST, {data}), 
    success: response => action(POST_FAQ.SUCCESS, {response}), 
    failure: error => action(POST_FAQ.FAILURE, {error}) 
}; 

FAQContainer.js

import React from 'react'; 

import { connect } from 'react-redux' 
import * as actions from '../../actions/FAQActions'; 

import FAQ from './FAQ'; 

function mapDispatchToProps(dispatch) { 
    return ({ 
     fetchData:() => {dispatch(actions.getFAQ.request)} 
    }) 
} 

function mapStateToProps(state) { 
    return ({ someInfo: "some info" + state}) 
} 

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

FAQ.js

import React, {Component} from 'react'; 
import axios from 'axios'; 

// import { connect } from 'react-redux' 
// import * as actions from '../../actions/FAQActions'; 


class FAQ extends Component { 
    componentDidMount() { 
     console.log('this.props.someInfo'); 
     console.log(this.props.someInfo); 
     console.log('this.props.fetchData()'); 
     console.log(this.props.fetchData()) 
    } 

    render() { 
     return (
      <div> 
       <p>Here some Frequently Asked Questions will be displayed.</p> 
       {console.log('FAQ')} 
       { this.props.children } 
       <button type="button" onClick={this.postLoginData}> 
        post 
       </button> 
      </div> 
     ) 
    } 
} 

FAQ.propTypes = {}; 

export default FAQ; 
+0

Sind Sie sicher, dass Sie 'FAQContainer' und nicht' FAQ' in einer übergeordneten Komponente verwenden? – dostu

Antwort

0

mit diesem Code in FAQContainer.js Versuchen

function mapDispatchToProps(dispatch) { 
    return { 
     fetchData() { 
      dispatch(actions.getFAQ.request); 
     } 
    }; 
} 

function mapStateToProps(state) { 
    return (state) => ({ 
     someInfo: "some info" + state; 
    }); 
} 
+0

hat leider nicht geholfen. Hast du vielleicht noch andere Vorschläge? –

0

Statt eine Funktion in Requisiten schaffen Sie könnte einfach die dispatch auf Ihre Requisiten Karte und senden Sie alle erforderlichen Maßnahmen direkt aus Ihrer Komponente:

function mapDispatchToProps(dispatch) { 
    return { 
    dispatch 
    }; 
} 

Und in Ihrer Komponente jetzt können Sie einfach tun:

componentDidMount() { 
    this.props.dispatch(actions.getFAQ.request); 
} 

Und da Dispatch fließen eine Aktion für die Auslösung und beginnen, die redux Daten Ich bin nicht sicher, warum Sie console.log auf die fordern, ist nur Ausgabe Ihres Dispatchanrufs. Sie können das Ergebnis Ihres asynchronen API-Aufrufs nicht auf eine synchrone Weise abrufen, es sollte unter Verwendung von mapStateToProps zugeordnet werden, wenn Sie Ihre Komponente mit Redux verbinden.

Die andere Lösung, die ich denke, wird hilfreich sein, ist bindActionCreators von redux zu verwenden:

import { bindActionCreators } from 'redux'; 
import * as actionCreators from '../actions/youractions'; 

//... 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actionCreators, dispatch), 
    dispatch, 
    }; 
} 

die die Aktionen in Ihre Requisiten abbildet. Mit dieser Lösung brauchen Sie die dispatch Ihre Aktionen nicht manuell sie würden alle automatisch auf Ihre Requisiten zugeordnet werden.