[Переведено] с использованием опроса AJAX в React и Redux

внешний интерфейс Программа перевода самородков React.js Facebook Ajax внешний фреймворк Redux

обновить:Просмотрите последние статьи об использовании redux-saga для опроса:

setIntervalsetTimeoutСотрудничатьрекурсивное решениеНо вы можете показать свои способности.

React и Redux предоставляют нам реактивный поток данных, как мы можем заставить обычный метод опроса жить в гармонии с ним? RxJS и другие библиотеки Observable — хорошие варианты для обработки опроса, но если ваш проект уже не интегрирует библиотеку Observable, не стоит использовать связанную библиотеку только для решения опроса. В настоящее время достаточно обрабатывать AJAX-опрос, комбинируя методы жизненного цикла компонентов React и действия Redux.Давайте посмотрим, как это решить?

Во-первых, текущее состояние объясняется Редюсером Redux:

const initialState = {  
    data: {},
    isFetching: false
};

export function data (state = initialState, action) {  
    switch (action.type) {
    case DATA_FETCH_BEGIN: {
        return { ...state, isFetching: true };
    }
    case DATA_FETCH_SUCCESS: {
        return { isFetching: false, data: { ...state.data, action.payload }};
    }
    case DATA_FETCH_ERROR: {
        return { ...state, isFetching: false };
    }
    default:
        return state;
}

Я не буду здесь объяснять, как работать с функциями создания асинхронных действий в Redux, чтобы лучше понять это, обратитесь к асинхронному примеру в документации Redux. Пока просто предположим, что у нас уже есть соответствующее промежуточное ПО Redux для обработки различных действий, упомянутых в этой статье. я бы использовал сreal-world example(Аннотация: Репозиторий, связанный с исходным текстом, больше не существует, вы можете обратиться к одноименному примеру в документации Redux) Функция создания действия в аналогичной форме.

В соответствии с приведенной выше моделью данных наша функция создания действия может быть:

export function dataFetch() {  
  return {
    [CALL_API]: {
      types: [DATA_FETCH_BEGIN, DATA_FETCH_SUCCESS, DATA_FETCH_ERROR],
      endpoint: 'api/data/'
    }
  };
}

Возвращаясь к исходному вопросу, давайте подумаем, как бы вы реализовали опрос для интерфейса API. Вы бы установили таймер опроса в Reducer? Или в функции создания действий? Может быть, в промежуточном программном обеспечении? Если поставить таймер в Smart компоненте (Аннотация: см.Smart and Dumb Components - Medium) как насчет этого? Я бы предпочел установить таймеры в компоненте не только потому, что компонент должен контролировать свои собственные зависимости данных, но мы можем управлять этими таймерами с помощью методов жизненного цикла компонента, понимаете, как?

import React from 'react';  
import {connect} from 'react-redux';  
import {bindActionCreators} from 'redux';  
import * as DataActions from 'actions/DataActions';

// 组件需要哪些 Redux 全局状态作为 props 传入？
function mapStateToProps(state) {  
    return {
        data: state.data.data,
        isFetching: state.data.isFetching
    };
}

// 组件需要哪些 Action 创建函数作为 props 传入？
function mapDispatchToProps(dispatch) {  
    return {
        dataActions: bindActionCreators(DataActions, dispatch)
    };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class AppContainer {  
    componentWillReceiveProps(nextProps) {
        if (this.props.data !== nextProps.data) {

            clearTimeout(this.timeout);

            // 你可以在这里处理获取到的数据

            if (!nextProps.isFetching) {
                this.startPoll();
            }
        }

    }

    componentWillMount() {
        this.props.dataActions.dataFetch();
    }

    componentWillUnmount() {
        clearTimeout(this.timeout);
    }

    startPoll() {
        this.timeout = setTimeout(() => this.props.dataActions.dataFetch(), 15000);
    }
}

Хорошо, все готово. Поскольку приведенному выше компоненту для рендеринга нужны дополнительные данные, он попытается получить эти данные при монтировании. когдаdataFetchПосле отправки нового действия наш Редюсер вернет новое состояние, которое вызовет срабатывание компонента.componentWillReceivePropsметод. В этом методе жизненного цикла все запущенные таймеры будут сначала очищены, а новый таймер будет запущен немедленно, если в данный момент нет запроса данных.

Здесь также есть много способов справиться с проблемами опроса интерфейса, и если есть какой-либо метод длинного опроса, то метод опроса здесь связан с фазой. Но я все же надеюсь, что эта статья поможет прояснить, как работает метод жизненного цикла REACT и поток данных REDUX.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории