React 應用程序轉換為 react-native - react-redux 和 react-thunk 的問題

Question

我轉換了這個應用程序https://codesandbox.io/s/3y77o7vnkp <--Please check this link到我的 react-native 應用程序中，它運行良好。 由於我實現了 redux 和 redux-thunk，我在獲取數據時遇到了問題。

有一個問題。 我將這個上層鏈接的普通函數轉換為 react-native 中的 action 和 reducer。 例如

handleSelect = itemValue => {
    this.setState(
      {
        ...this.state,
        base: itemValue,
        result: null,
      },
      this.calculate
    );
  };

到 actiontypes.js

export const HANDLE_FIRST_SELECT = 'HANDLE_FIRST_SELECT';

動作.js

export const handleFirstSelect = itemValue => {
  return {
    type: actionTypes.HANDLE_FIRST_SELECT,
    itemValue: itemValue,
  };
};

和 reducer.js

const initialState = {
  currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR', 'PLN', 'GBP'],
  base: 'EUR',
  amount: '',
  convertTo: 'PLN',
  result: '',
  date: '',
  error: null,
  loading: false,
};
 const exchangeCurrencies = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.HANDLE_FIRST_SELECT:
      return {
        ...state,
        base: action.itemValue,
        result: null,
      };
...

下一步，我在組件中使用了 mapStateToProps 和 mapDispatchToProps，如下所示

const mapDispatchToProps = dispatch => {
  return {
    handleFirstSelect: itemValue =>
      dispatch(exchangeCurriencesActions.handleFirstSelect(itemValue)),
...

const mapStateToProps = (state) => {
  return {
    base: state.base,
    amount: state.amount,
    convertTo: state.convertTo,
    result: state.result,
    date: state.date,
  };
};

我現在正在使用 this.props

<PickerComponent
    selectedValue={this.props.base}
    onValueChange={this.props.handleFirstSelect}
/>

在那之前，一切正常。 現在，當我使用 react-redux 和 redux-thunk (action.js) 以這種方式下載數據時，它停止工作

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

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

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

下一個 reducer.js

...
case actionTypes.FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case actionTypes.FETCH_DATA_SUCCESS:
      console.log('data', action.data);
      return {
        ...state,
        date: action.data.date,
        result: action.data.rates,
        loading: false,
      };
    case actionTypes.FETCH_DATA_FAIL:
      console.log('data', action.error);
      return {
        ...state,
        loading: false,
        error: action.error,
      };
...

在下一步中，將函數 fetchData 添加到 mapDispatchToProps 並在 componentDidMount 中像這樣調用它

  componentDidMount() {
    if (this.props.amount === isNaN) {
      return;
    } else {
      try {
        this.props.fetchData();
      } catch (e) {
        console.log('error', e);
      }
    }
  }

最后我在 mapStateToProps 中添加了貨幣計算。 我改變結果像那個result: (state.result[state.convertTo] * state.amount).toFixed(4),

我還在商店中添加了 applymiddleware 。

最后有一個錯誤

import React from 'react';
import HomeContentContainer from '../../containers/HomeContentContainer/HomeContentContainer';

class HomeScreen extends React.Component {
  render() {
    return <HomeContentContainer />;
  }
}

export default HomeScreen;

有誰知道如何解決這個問題？ 我應該在哪里更改代碼？

Answer 1

跟進對該問題的評論，請務必查看這些...

在mapStateToProps保護您對state.result的訪問，例如：

result: state.result ? (state.result[state.convertTo] * state.amount).toFixed(4) : null

，其中null也可以是0或其他什么，您的電話。 您的mapStateToProps確實在 API 請求完成之前被調用（至少）一次，因此它需要處理state.result的初始狀態。

我發現 components 屬性result和state.result是不同的東西，這很令人困惑，但這只是我對命名的看法。