Extreact List с избыточным состоянием и локальным хранилищем - PullRequest
1 голос
/ 06 октября 2019

Я использую Redux для управления состоянием в этом запущенном мной приложении с экстремальными возможностями, и я нахожусь в компоненте (List), которому нужны данные из хранилища избыточных данных. Компонент List нуждается в параметре store, который я знаю, как его создать, но я не знаю, как связать его с хранилищем приставок.

Я нашел пример из блога Sencha, но его не хватает точно вчасть, которая меня интересует:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Grid } from '@extjs/ext-react';
import { connect } from 'react-redux';

export default class EmployeesGrid extends Component {

    static propTypes = {
        criteria: PropTypes.object
    };

    store = new Ext.data.Store({
        ...
    });

    componentDidUpdate(prevProps) {
        const { criteria } = this.props;

        if (prevProps.criteria !== criteria) {
            const filters = [];

            for (let name in criteria) {
                filters.push({
                    property: name,
                    value: criteria[name]                   
                })
            }

            this.store.filter(filters)
        }
    }

    render() {
        return (
            <Grid 
                store={this.store}
                ...
            />
        )
    }
}

const mapStateToProps = (state) => {
    return { criteria: state.criteria }
};

export default connect(mapStateToProps)(EmployeesGrid);

Как Ext.data.Store получает элементы и как эти элементы обновляются, например, на componentDidUpdate?

1 Ответ

0 голосов
/ 11 октября 2019

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я - разработчик ExtJs, а также разработчик React / Redux, но еще не пробовал вместе.

Мне кажется, ваш пример взят из этой статьи

Вы публикуете пример варианта 2, где пишут, что данные не сохраняются в избыточном коде, а только критерии фильтрации для таблицы ExtJs. Данные обрабатываются из React / Redux в ExtJs Store, вам нужно использовать их API для (пере) загрузки данных.

...