1

Здравствуйте, вопрос по React и Redux к мотерым разработчикам, зачем использовать middleWare? Могу ли я делать так?

Код контейнера

import component from '../components/cost';
import {changeRequestStateToSuccess, changeRequestStateToLoaded, changeCostValue} from "../actions/costActions";
function checkDataForCalculation(data) {
    return !!(data.country && data.dateOfBirth && data.startDate && data.endDate);
}
function calculateCost(dispatch, data) {
    if (checkDataForCalculation(data)) {
        dispatch(changeRequestStateToLoaded());
        let promise = fetch('/webpack/php/calc.php');
        promise
            .then(function (response) {
                let prms = response.text();
                prms.then(function (resp) {
                    let cost = JSON.parse(resp).cost;
                    dispatch(changeRequestStateToSuccess());
                    dispatch(changeCostValue(cost));
                });
            });
    }
}
function mapStateToProps(state) {
    return {
        cost: state.cost.value,
        costRequestStatus: state.cost.requestState,
        data: state.data
    }
}
function mapDispatchToProps(dispatch) {
    return {
        sendRequestForCostCalculation: (data) => {
            calculateCost(dispatch, data);
        }
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(component)

Код компонента представления

export default class Cost extends React.Component {
    getRequestState() {
        return (this.props.costRequestStatus == 'success') ? 'Цена усешно расчитана' :
               (this.props.costRequestStatus == 'error') ? 'Ошибка расчета' :
               (this.props.costRequestStatus == 'loaded') ? 'Цена расчитывается' :
               'Цена не запрашивалась';
    }
    render() {
        return (
            <div>
                <span>{this.getRequestState()}</span>
                <br/>
                <span>{this.props.cost} руб.</span>
                <button onClick={()=>{this.props.sendRequestForCostCalculation(this.props.data)}}>Расчитать</button>
            </div>
        )
    }
}

1 ответ 1

1

Не очень понятно какой именно middleware ты не хочешь использовать. Вероятно речь о Redux Thunk.

Написанный код конечно же будет работать (или точнее выглядит так, как-будто будет работать: явных косяков не видно), но есть ряд проблем и неудобств в сравнении с использованием Redux Thunk:

  1. Приведенное решение не идиоматично.
  2. Thunk пихает в качестве параметров в принимаемую функцию dispatch, getState и произвольный extraArgs. В твоем решении есть dispatch и его хватает, но в замороченных асинхронных actions очень часто надо брать текущее состояние state-а. extraArgs удобен для пропихивания в логику внешних зависимостей (например, api сервера), до которых не хочется лазить через глобальные зависимости.
  3. Dispatch thunk-а вернет результат его выполнения. Что очень удобно при комбинировании и реиспользовании thunk-ов.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.