Reduxの-サンクいずれかで私を助けることができる小道具にmapstateに私は私のコードで問題を抱えている

Question

こんにちはみんなを状態を更新しないリデューサー

Action.js

import axios from 'axios'; 
import { API_URL, API_KEY } from './const'; 

export const FETCH_FLAG_GENDERS = 'FETCH_FLAG_GENDERS'; 
export const FETCH_FLAG_COUNTRIES = 'FETCH_FLAG_COUNTRIES'; 
export const FETCH_FLAG_PROVINCES = 'FETCH_FLAG_PROVINCES'; 
export const FETCH_FLAG_BLOODGROUPS = 'FETCH_FLAG_BLOODGROUPS'; 
export const FETCH_FLAG_BLOODGROUPTYPES = 'FETCH_FLAG_BLOODGROUPTYPES'; 



export function fetchFlagProvinces() { 
    return async dispatch => { 
    function onSuccess(request) { 
     dispatch({ 
     type: FETCH_FLAG_PROVINCES, 
     payload: request 
     }); 
     return request; 
    } 

    function onError(error) { 
     console.log(error); 
    } 

    try { 
     const request = axios.get(`${API_URL}/flag/province`, { 
     headers: { Authorization: API_KEY } 
     }); 
     return onSuccess(request); 
    } catch (error) { 
     return onError(error); 
    } 
    } 
} 

をReduxの、サンク

import { 
    FETCH_FLAG_GENDERS, 
    FETCH_FLAG_PROVINCES, 
    FETCH_FLAG_COUNTRIES, 
    FETCH_FLAG_BLOODGROUPS, 
    FETCH_FLAG_BLOODGROUPTYPES 
} from '../actions/flag'; 
const FLAG_INITIAL_STATE = { 
    genderList: [], 
    provinceList: [], 
    countryList: [], 
    bloodGroupList: [], 
    bloodGroupTypeList: [] 
}; 
export default function(state = FLAG_INITIAL_STATE, action){ 
    switch(action.type){ 

    case FETCH_FLAG_PROVINCES: 
     console.log('====REDUCER====') 
     console.log(action); 
     return { 
     ...state, 
     provinceList: action.payload.data 
     }; 
    break; 

    default: 
     return state; 
    } 
} 

**

コンテナ

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { fetchFlagGenders, fetchFlagProvinces, fetchFlagCountries, fetchFlagBloodGroups, fetchFlagBloodGroupsType } from '../../actions/flag'; 
import { Card, Input, FormGroup, TextArea, Row, Column, Select } from '../../component/bootstrap/'; 


class PatientForm extends Component { 
    async componentWillMount() { 
    //this.props.fetchFlagGenders(); 
    //this.props.fetchFlagProvinces(); 
    //this.props.fetchFlagBloodGroups(); 
    //this.props.fetchFlagBloodGroupsType(); 
    //this.props.fetchFlagProvinces(); 

    this.props.fetchFlagProvinces() 
    .then((response) => { 
     console.log('====CONTAINER====='); 
     console.log(response.data); 
    }, (error) => { 
     console.log('fail'); 
    }); 


    } 


    render() { 
    const { handleSubmit } = this.props; 
    console.log('===PROP PROVINCE LIST===') 
    console.log(this.props.provinceList); 
    console.log('===END PROVINCE LIST===') 
    return (
     <Row> 
     <Card> 

     </Card> 
     </Row> 
    ); 
    } 
} 

const validate = (values) => { 
    const errors = {}; 

    if(!values.firstName) 
    errors.firstName = 'please enter first name'; 

    if(!values.lastName) 
    errors.lastName = 'please enter last name'; 

    return errors; 
} 

const mapStateToProps = (state) => { 
    return { 
    genderList: state.flags.genderList, 
    provinceList: state.flags.provinceList, 
    bloodGroupList: state.flags.bloodGroupList, 
    bloodGroupTypeList: state.flags.bloodGroupTypeList 
    } 
} 

PatientForm = connect(mapStateToProps, { fetchFlagGenders, fetchFlagProvinces, fetchFlagBloodGroups, fetchFlagBloodGroupsType })(PatientForm); 

export default reduxForm({ 
    validate, 
    'form': 'PatientForm' 
})(PatientForm); 

インデックスJS

import 'babel-polyfill'; 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import promise from 'redux-promise' 
import thunk from 'redux-thunk' 
import reducers from './reducers'; 
import App from './app'; 

const store = createStore(
    reducers, 
    applyMiddleware(thunk) 
); 
ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('app')); 

ああ容器の中に、私はthis.propsを使用することはできませんなぜ私は見当がつかない

import { combineReducers } from 'redux'; 
import { reducer as formReducer } from 'redux-form'; 

import PatientReducer from './patient_reducer'; 
import FlagReducer from './flag_reducer'; 
import ConfigurationReducer from './configuration_reducer'; 

const rootReducer = combineReducers({ 
    flags: FlagReducer, 
    patients: PatientReducer, 
    form: formReducer 
}); 

export default rootReducer; 

index.js減速を忘れます.provinceそれは定義されていません！また、私はconsole.logから確かですが、それは約束が完了したときに状態を更新しないように見えます。ここで

は、APIのURLはhttp://demo3918385.mockable.io/flag/province

注1：）コンテナthis.props.fetchFlagProvincesで（あるは、正しくデータをフェッチすることができ、データ

もコードがすべきで終わる約束の終わりでOKスタート作業everythink私は私に教えてください改善する。 ありがとう

Answer 1

あなたの斧のリクエストの前にキーワードを忘れました。あなたはそれが処理されるのを待たずにプロミスを得る。

try { 
    const request = await axios.get(`${API_URL}/flag/province`, { 
    headers: { Authorization: API_KEY } 
    }); 
    return onSuccess(request); 
} catch (error) { 
    return onError(error); 
}