REDX传奇，问题的机智连接（）

我试图从我的API使用REDX传奇获取一些数据。不幸的是它失败了，我收到Uncaught TypeError: this.props.fetchData is not a function。另外this.props.someInfo是未定义的。由于我正在做一些控制台日志，我看到没有输入功能getData。我认为这意味着解雇这个行为是有问题的。不幸的是，我不知道什么可能是错误的或如何解决它。REDX传奇，问题的机智连接（）

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;

来源

2017-10-08 werw werw

您确定您在某些父组件中使用'FAQContainer'而不是'FAQ'吗？ – dostu

与此代码在FAQContainer.js

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

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

来源

2017-10-08 16:10:51

不幸的是它没有帮助。你有没有其他建议？ –

会转而在道具创造一个功能，你可以简单地映射dispatch到你的道具并直接从组件发送任何需要的操作：

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

而在你的组件现在，你可以简单地做：

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

而且由于调度恰恰是触发一个动作，开始了Redux数据流，我不知道为什么你正在呼吁console.log你的调度呼叫的输出。您无法以同步方式获得异步API调用的结果，因此在将组件连接到redux时，应使用mapStateToProps进行映射。

另一种解决方案，我认为将是有帮助的是使用bindActionCreators从终极版：

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

//... 

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

它映射动作到你的道具。使用此解决方案，您不需要手动操作dispatch，它们将全部自动映射到您的道具。

来源

2017-10-08 19:32:15

REDX传奇，问题的机智连接（）

回答

相关问题