Redux - как вызвать действие и дождаться его разрешения - PullRequest
Новая
       21

Redux - как вызвать действие и дождаться его разрешения

0 голосов
/ 05 января 2019

Я использую реагировать родной + редукс + редукс-thunk У меня нет большого опыта с редуксом и реагирую на родной

Я вызываю действие внутри моего компонента. 

this.props.checkClient(cliente);

if(this.props.clienteIsValid){
   ...
}

и в этом действии происходит вызов API, который занимает несколько секунд. 

export const checkClient = (cliente) => {
    return dispatch => {

        axios.get(`${API_HOST}/api/checkclient`, header).then(response => {

            dispatch({type: CHECK_CLIENT, payload: response.data }); //valid or invalid

        }).catch((error) => {  });

    }
}

Мой вопрос: как я могу отложить возврат действия до завершения ответа API? Мне нужен ответ API, чтобы знать, является ли клиент действительным или недействительным. То есть мне нужно разрешить действие, а затем убедиться, что клиент действителен или недействителен.

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Вы можете вернуть обещание из действия, чтобы вызов стал thenable : 

// Action
export const checkClient = (cliente) => {
    return dispatch => {
        // Return the promise
        return axios.get(...).then(res => {
            ...
            // Return something
            return true;
        }).catch((error) => {  });
    }
}


class MyComponent extends React.Component {

    // Example
    componentDidMount() {
        this.props.checkClient(cliente)
            .then(result => {
                // The checkClient call is now done!
                console.log(`success: ${result}`);

                // Do something
            })
    }
}

// Connect and bind the action creators
export default connect(null, { checkClient })(MyComponent);

Возможно, это выходит за рамки вопроса, но, если хотите, вы можете использовать async await вместо then для обработки своего обещания: 

async componentDidMount() {
    try {
        const result = await this.props.checkClient(cliente);
        // The checkClient call is now done!
        console.log(`success: ${result}`)

        // Do something
    } catch (err) {
        ...
    }
}

Это делает то же самое.

0 голосов
/ 05 января 2019

Я не понимаю проблему, но, возможно, это может помочь 

export const checkClient = (cliente) => {
  return dispatch => {
    dispatch({type: CHECK_CLIENT_PENDING });

    axios.get(`${API_HOST}/api/checkclient`, header).then(response => {

        dispatch({type: CHECK_CLIENT, payload: response.data }); //valid or invalid

    }).catch((error) => {  });

   }
}

... 

 this.props.checkClient(cliente);

 if(this.props.clienteIsPending){
  ...
 }

 if(this.props.clienteIsValid){
  ...
 }
...