Редукс Thunk Извлечение API действия и редуктор

Question

Поэтому решили использовать redux-thunk, и у меня возникла проблема, чтобы написать функцию в моих действиях и редуктор. На самом деле функция выглядит следующим образом:

  async getData() {
    if (this.props.amount === isNaN) {
      return;
    } else {
      try {
        await fetch(
          `https://api.exchangeratesapi.io/latest?base=${this.props.base}`,
        )
          .then(res => res.json())
          .then(data => {
            const date = data.date;
            const result = (data.rates[this.props.convertTo] * this.props.amount).toFixed(4);
            this.setState({
              result,
              date,
            });
          }, 3000);
      } catch (e) {
        console.log('error', e);
      }
    }
  }

Также у меня уже есть типы действий

export const FETCH_DATA_BEGIN = 'FETCH_DATA_BEGIN';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAIL = 'FETCH_DATA_FAIL';

и подобные действия

export const fetchDataBegin = () => {
  return {
    type: actionTypes.FETCH_DATA_BEGIN,
  };
};

export const fetchDataSuccess = data => {
  return {
    type: actionTypes.FETCH_DATA_SUCCESS,
    data: data,
  };
};

export const fetchDataFail = error => {
  return {
    type: actionTypes.FETCH_DATA_FAIL,
    error: error,
  };
};

А затем наступает сложная часть для я, где я не знаю, как получить тот же результат из функции async getData(). У меня уже есть только одно в моих действиях:

export async function fetchData() {
  return async dispatch => {
    return await fetch(`https://api.exchangeratesapi.io/latest?base=${this.props.base}`)
        .then(res => res.json())
        .then(data => {
         // <------------------- WHAT NEXT?
  }
};

Answer 1

export function fetchData() {
  return dispatch => {
    fetch(`https://api.exchangeratesapi.io/latest?base=${this.props.base}`)
        .then(res => res.json())
        .then(data => dispatch(fetchDataSuccess(data)), e => dispatch(fetchDataFail(e)))
  }
};

Теперь этот код:

const date = data.date;
const result = (data.rates[this.props.convertTo] * this.props.amount).toFixed(4);
this.setState({
  result,
  date,
});

переходит в ваш редуктор

if(action.type === FETCH_DATA_SUCCESS) {
  const date = action.data.date;
  const rates = action.data.rates;
  return { ...state, rates, date };
}

Теперь вы можете использовать состояние избыточности в вашем компоненте и выполнять остальные вычисления там (те, которые нуждаются в this.props).

Чтобы отправить действие fetchData сейчас, вы выполняете this.props.dispatch(fetchData()) в своем компоненте с реактивным-редуксом.

РЕДАКТИРОВАТЬ

Вот как вы используете состояние в компоненте.

Я предполагаю, что вы создали хранилище избыточностей. что-то вроде:

const store = createStore(rootReducer,applyMiddleware(thunk));

Теперь, вы можете использовать функцию connect библиотеки react-redux для подключения состояния редукции к вашему компоненту.

function mapStateToProps(state, ownProps) {
  return { 
    date: state.date,
    result: (state.rates[ownProps.convertTo] * ownProps.amount).toFixed(4);
  }
}

function mapDispatchToProps(dispatch) {
  return {
    fetchData: () => dispatch(fetchData())
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(YourComponent)

Вы можете использовать этот более высокий порядок Компонент в вашей DOM сейчас и передать ему соответствующие реквизиты:

import ConnectedComponent from "./pathTo/ConnectedComponent";
...
return <View><ConnectedComponent convertTo={...} amount={...} /></View>;

И также внутри YourComponent теперь вы можете читать this.props.date и this.props.result и использовать их везде, где вам нужно.

Возможно, в будущем вы захотите взглянуть на селекторы , чтобы запомнить состояние и снизить затраты производительности на избыточность.