Как я могу передать информацию о действиях в Component, React + Redux?

Question

Итак, я делаю запрос API на свой Action.js и, когда это сделано, отправляю параметр 'success' компоненту, который вызывает действие.

Какой это лучший способ сделать это?

Мой код:

Action.js

export const setarLojas = (lojas) =>{
    return {
      type: SETAR_LOJAS,
      data: lojas
    }
  }

  export const carregarLojas = () => {
    return (dispatch) => {
      return API.get('loja')
      .then(response => {
        dispatch(setarLojas(response.data))

        // Example
        // return "success"
      })
      .catch(error => {
        throw(error);
      })
    }
  }

Component.js

componentDidMount(){
      this.props.carregarLojas();

      // Example
      // if(this.props.carregarLojas == "success") { alert("success") }
    }

Answer 1

Вы можете использовать статус (как состояние в вашем редукторе, в дополнение к вашим данным), связанный с вашим действием;

setarLojas: {
      data: actionData, 
      status: actionStatus
}

Затем изменить значение вашего статуса в соответствии с результатом вашего действия,

пример значений для использования в состоянии состояния: 'request' | 'error' | 'timeout' | 'success'.

пример действия:

export const setarLojas = (lojas, status) =>{
   return {
      type: SETAR_LOJAS,
      data: lojas,
      status: status
   }
 }

export const carregarLojas = () => {
    return (dispatch) => {
      dispatch(setarLojas({}, 'request'));
      return API.get('loja')
      .then(response => {
        dispatch(setarLojas(response.data, 'success'));
      })
      .catch(error => {
         dispatch(setarLojas({}, 'error'));
         throw(error);
      })
    }
  }

В ваших компонентах, после подключения его к редуксу с помощью connect hoc, выможно получить ваши данные, например:

const mapStateToProps = state => ({
     setarLojasData: state.YOUR_REDUCER.getIn(['setarLojasData', 'data']), 
     setarLojasStatus: state.YOUR_REDUCER.getIn(['setarLojasData', 'status'])
})

Итак, теперь у вас есть статус, который описывает результат вашего действия, и в соответствии с его значением вы можете управлять своим видом, а затем использовать данные.

Answer 2

Для решения проблемы асинхронного вызова API вы должны использовать промежуточное ПО Redux Thunk .Thunk обработает ваш асинхронный вызов API.