Redux Thunk - Async, цепочки с обещаниями

Question

, так что я был в тупике по этой проблеме в течение последних двух дней.

Так что в приложении есть несколько организаций. У меня также есть действие, позволяющее пользователю переключаться между организациями.

Организации Редуктор:

import { 
    FETCH_ORGANIZATION_LIST_REQUEST, 
    FETCH_ORGANIZATION_LIST_SUCCESS, 
    ORGANIZATION_ERROR, 
    PICK_ORGANIZATION } from '../actions/types' 

const INITIAL_STATE = { error: null, organizations: [], isFetching: false, currentOrganization: null, hasCurrentOrganization: false }; 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type){ 
     case FETCH_ORGANIZATION_LIST_REQUEST: 
      return { ...state, isFetching: action.isFetching, error: null}; 
     case FETCH_ORGANIZATION_LIST_SUCCESS: 
      return { ...state, isFetching: action.isFetching, organizations: action.payload, error: null }; 
     case ORGANIZATION_ERROR: 
      return { ...state, isFetching: action.isFetching, error: action.payload }; 
     case PICK_ORGANIZATION: 
      return { ...state, currentOrganization: action.organizationId, hasCurrentOrganization: action.hasCurrentOrganization }; 
     default: 
      return state 
    } 
} 

Выборка организации и выбрать организации вызовов ниже:

export function fetchOrganizationList() { 
    const url = `/organizations`; 

    return (dispatch) => getData(
     FETCH_ORGANIZATION_LIST_REQUEST, 
     FETCH_ORGANIZATION_LIST_SUCCESS, 
     ORGANIZATION_ERROR, 
     true, 
     url, 
     dispatch); 
}; 

export function pickOrganization(organizationId) { 
    return (dispatch) => { 
     dispatch({ 
      type: PICK_ORGANIZATION, 
      organizationId: organizationId, 
      hasCurrentOrganization: true 
     }) 
    } 
}; 

Я получил вызов GetData, который также используется для других вызовов сервера:

export function getData(actionRequest, actionSuccess, errorType, isAuthReq, url, dispatch) { 
    const requestUrl = API_URL + url; 
    let headers = {}; 

    dispatch({ 
     type: actionRequest, 
     isFetching: true, 
     error: null 
    }); 

    if(isAuthReq) { 
     headers = {headers: {'Authorization': 'Token ' + cookie.load('token')} } 
    } 

    axios.get(requestUrl, headers) 
     .then((response) => { 
      dispatch({ 
       type: actionSuccess, 
       isFetching: false, 
       payload: response.data 
      }); 
      return response.data; 
     }) 
     .catch((error) => { 
      errorHandler(dispatch, error, errorType) 
     }) 

} 

И, наконец, у меня есть компонент OrganizationSelector.jsx, который позволяет меня выбрать и выбрать нынешнюю организацию.

import React, { 
    Component, 
    PropTypes, 
} from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

import { fetchOrganizationList, pickOrganization, fetchAndPickCurrentOrganization } from '../../actions/organizations'; 

import Picker from '../../components/Picker'; 

class OrganizationSelector extends Component { 


    componentDidMount() { 

     this.props.fetchOrganizationList(); 
    } 

    render() { 
     const { isFetching, error, organizations, dispatch } = this.props; 

     let count = !isFetching ? organizations.count : 1; 

     return (
      <div> 
       {isFetching && !error && 
       <li>Loading...</li>} 
       {!isFetching && !error && count > 1 && 
       <Picker 
        currentOrganization={organizations.results[0].name} 

        options={organizations.results} 
        onSubmit={pickOrganization()} 
       /> 
       } 
       {!isFetching && !error && count === 1 && 
       <div> 
        {organizations.results[0].name} 
       </div> 
       } 
      </div> 
     ); 
    } 
} 

OrganizationSelector.propTypes = {}; 
OrganizationSelector.defaultProps = {}; 

const mapStateToProps = state => ({ 
    organizations: state.organization.organizations, 
    isFetching: state.organization.isFetching, 
    error: state.organization.error 
}); 

function mapDispatchToProps(dispatch) { 
    return { 
     fetchOrganizationList: bindActionCreators(fetchOrganizationList, dispatch), 
     // pickOrganization: bindActionCreators(pickOrganization, dispatch) 
    } 
} 

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

Теперь, когда я получаю проблемы в цепочках действий вместе в одном действии creator.I хочет передать действие picOrganization после fetchOrganizationList действия завершает выборку, я пытался делать много вещей, при наличии fetchListAndPickCurrentOrganization().

export function fetchListAndPickCurrentOrganization() { 
    return (dispatch) => { 
     dispatch(fetchOrganizationList()) 
      .then(response => { 
       console.log(response) // This is where the Pick organization call will go 
      }) 
      .catch(() => { 
       console.log('error') 
      }) 
    } 
}; 

Я также попытался сделать вызов AXIOS непосредственно в fetchOrganizationList() вызов, но я получаю .then как неопределенные, который я предполагаю, что это потому, что вернулся из ответа на вызов AXIOS не получает прошло до. then.

Я пробовал несколько вещей, но цель состоит в том, чтобы запустить эти два вызова при первой установке приложения, вызов pickOrganization, конечно, будет снова использоваться для переключения между организациями.

Answer 1

Итак, решение было довольно простым, мне пришлось вернуть запрос axios.get, поскольку он не возвращался в моем первоначальном решении, поэтому ничего не передавалось. Then, и оно не определено.

export function getData(actionRequest, actionSuccess, errorType, isAuthReq, url, dispatch) { 
    const requestUrl = API_URL + url; 
    let headers = {}; 

    dispatch({ 
     type: actionRequest, 
     isFetching: true, 
     error: null 
    }); 

    if(isAuthReq) { 
     headers = {headers: {'Authorization': 'Token ' + cookie.load('token')} } 
    } 

    return axios.get(requestUrl, headers) 
     .then((response) => { 
      dispatch({ 
       type: actionSuccess, 
       isFetching: false, 
       payload: response.data 
      }); 
      return response.data; 
     }) 
     .catch((error) => { 
      errorHandler(dispatch, error, errorType) 
     }) 

} 

Спасибо @Ashley 'CptLemming' Уилсон за решение этого для меня.