reduxが、APIアクションと減速をフェッチサンク

ダニエル・ゴーラ：

だから、使用することを決めた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?
  }
};

giotskhada：

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

今すぐあなたのコンポーネントでReduxの状態を使用し、そこに計算の残り（のものその必要性を作ることができますthis.props）。

派遣するfetchData今行動を、あなたは何this.props.dispatch(fetchData())あなたの反応-Reduxの連結成分に。

EDIT

ここでは、コンポーネントの状態を使用する方法です。

私はあなたがReduxのストアを作成していると仮定しています。何かのようなもの：

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

さて、あなたは使用することができreact-redux、ライブラリのconnectコンポーネントに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={...} ammount={...} /></View>;

そして、また、内部のYourComponentあなたが今読むことができるthis.props.dateとthis.props.result、あなたがする必要がどこにそれらを使用しています。

あなたは見たいかもしれませんセレクタ状態をmemoizeと再来のパフォーマンスコストを削減するために、将来的に。

reduxが、APIアクションと減速をフェッチサンク

おすすめ