Redux-thunk無法將mapstate中的狀態更新為props

Question

嗨，大家好，我的代碼有問題，任何人都可以幫助我解決redux-thunk

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);
    }
  }
}

減速器

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'));

哦，別忘了reducer index.js

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;

我不知道為什么在容器中我不能使用this.props.provinceList它說未定義！ 而且我從console.log檢查它是諾言，但似乎當諾言完成時它沒有更新狀態，任何人都可以幫助我。

這是api網址http://demo3918385.mockable.io/flag/province

注意1：在容器中this.props.fetchFlagProvinces（）可以正確地獲取數據，每一種都可以正常工作，以promise結束，以數據結束

還有我應該改進代碼的地方，請告訴我。 謝謝

Answer 1

您在axios的請求之前忘記了await關鍵字。 您得到一個Promise，是因為您不等待它被處理。

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