Я конвертировал это приложение https://codesandbox.io/s/3y77o7vnkp <--Please check this link в свое приложение с естественной реакцией, и оно отлично работает. Поскольку я реализовал Redux и Redux-Thunk, у меня возникла проблема с получением данных.
Возникла проблема. Я преобразовал обычные функции из этой верхней ссылки в действия и редукторы в реактивную. Например,
handleSelect = itemValue => {
this.setState(
{
...this.state,
base: itemValue,
result: null,
},
this.calculate
);
};
TO типов действия. js
export const HANDLE_FIRST_SELECT = 'HANDLE_FIRST_SELECT';
действие. js
export const handleFirstSelect = itemValue => {
return {
type: actionTypes.HANDLE_FIRST_SELECT,
itemValue: itemValue,
};
};
и редуктор. 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}
/>
До этого все работает нормально. Теперь, когда я загружаю данные таким способом с помощью response-redux и redux-thunk (действие. 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)),
);
};
};
следующий редуктор. 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),
, а также добавляю в магазин applymiddle.
И, наконец, ОШИБКА
import React from 'react';
import HomeContentContainer from '../../containers/HomeContentContainer/HomeContentContainer';
class HomeScreen extends React.Component {
render() {
return <HomeContentContainer />;
}
}
export default HomeScreen;
Кто-нибудь знает, как решить эту проблему? Где и на что мне менять код?