redux thunk fetch api action 和 reducer

Question

所以决定使用 redux-thunk 并且我在我的操作和 reducer 中编写函数时遇到问题。实际上函数看起来像这样：

  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 中使用这个高阶组件并将适当的道具传递给它：

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

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

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

redux thunk fetch api action 和 reducer

redux thunk fetch api action and reducer

javascript

react-native

redux

redux-thunk

react-redux