Redux 썽크를 사용하는 동안 정의되지 않은 작업을 실행하는 Redux

Question

이 문제는 redux-thunk의 잘못된 구성이나 썽크를 쓰는 방법에 대한 오해에서 비롯된 것 같습니다. 나는 여러 가지 다른 방법을 시도했지만, 내가 알 수있는 것으로부터 이것은 효과가있다. 그러나, 나는 아직도 그것의 발사가 정의되지 않은 redux 동작을 말하는 콘솔 메시지를 받고있다. 여기

import axios from 'axios'; 

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST'; 
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED'; 
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK'; 

export const fetchAboutContent =() => { 
    const url = `http://localhost:3000/about`; 

    return (dispatch, getState) => { 
    if (getState.isInitialized === true){ 
     console.log("desktop init should not be called when already desktop is init") 
     return Promise.resolve(); 
    } 

    if (getState.about.isLoading) { 
     console.log('is loading'); 
     return Promise.resolve(); 
    } 
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST }); 
    axios.get(url) 
     .then(res => dispatch({ 
     type: GET_ABOUT_CONTENT_OK, 
     res 
     })) 
     .error(err => dispatch({ 
     type: GET_ABOUT_CONTENT_FAILED, 
     err 
     })); 
    } 
} 

내 구성 요소의 동작 발사한다 : 나는 꽤 해봤

import React from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actions from '../../actions/about'; 
import getAboutContent from '../../reducers'; 

class AboutMe extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    componentWillMount() { 
    this.props.getAboutContent(); 
    } 

    render() { 
    return <div>{ this.props.content }</div> 
    } 
} 

const mapStateToProps = (state) => ({ 
    content: {} || getAboutContent(state) 
}) 

const mapDispatchToProps = (dispatch) => 
    bindActionCreators({ getAboutContent }, dispatch) 

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

을 여기

여기

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { applyMiddleware, createStore } from 'redux'; 
import thunk from 'redux-thunk'; 
import App from './components/App'; 
import rootReducer from './reducers'; 

const store = createStore(rootReducer, applyMiddleware(thunk)); 

ReactDOM.render(
    <Provider store={ store }> 
     <App /> 
    </Provider>, 
    document.getElementById('rootElement') 
); 

내 작업입니다 내 가게 구성입니다 mapDispatchToProps에 대한 몇 가지 구성, 즉 connect(..., { fetchData: getAboutContent })... 등. 어떤 도움이라도 대단히 감사합니다. https://github.com/sambigelow44/portfolio-page

Answer 1

당신이 fetchAboutContent을 수출, 당신의 감속기 이름을 확인하지만, getAboutContent를 가져옵니다

편집

: 그 사람에게 도움이 경우 여기 는 자식의 repo입니다.

Answer 2

조치 파일의 코드가 올바르지 않은 것으로 보입니다.

getState는 함수입니다.

아래 코드를 변경하십시오.

import axios from 'axios'; 

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST'; 
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED'; 
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK'; 

export const fetchAboutContent =() => { 
    const url = `http://localhost:3000/about`; 

    return (dispatch, getState) => { 
    if (getState().isInitialized === true){ 
     console.log("desktop init should not be called when already desktop is init") 
     return Promise.resolve(); 
    } 

    if (getState().about.isLoading) { 
     console.log('is loading'); 
     return Promise.resolve(); 
    } 
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST }); 
    axios.get(url) 
     .then(res => dispatch({ 
     type: GET_ABOUT_CONTENT_OK, 
     res 
     })) 
     .error(err => dispatch({ 
     type: GET_ABOUT_CONTENT_FAILED, 
     err 
     })); 
    } 
} 

또한 당신은 Axios의 통화에서 약속을 반환 단지 return 문을 추가해야합니다.

return axios.get(url) 
    .then(res => dispatch({ 
    type: GET_ABOUT_CONTENT_OK, 
    res 
    })) 
    .error(err => dispatch({ 
    type: GET_ABOUT_CONTENT_FAILED, 
    err 
    }));