redux thunk 获取 api 动作和 reducer

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

现在您可以在组件中使用 redux 状态并在那里进行其余计算（需要 this.props 的计算）。

现在要调度 fetchData 操作，您可以在 react-redux 连接组件中执行 this.props.dispatch(fetchData())。

编辑

以下是您在组件中使用状态的方式。

我假设您已经创建了 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 中使用这个高阶组件并将适当的 props 传递给它：

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

而且，在YourComponent 中，您现在可以阅读this.props.date 和this.props.result 并在任何需要的地方使用它们。

你以后可能想看看selectors 来记忆状态并降低redux的性能成本。