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;
Sind Sie sicher, dass Sie 'FAQContainer' und nicht' FAQ' in einer übergeordneten Komponente verwenden? – dostu