Question

在我启动的这个功能强大的应用程序中，我正在使用Redux进行状态管理，并且我所在的组件（List）需要Redux存储中的数据。 List组件需要一个store参数，该参数我知道如何创建，但我不知道如何将其与redux存储区耦合。

我从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上更新？

Answer 1

免责声明：我既是ExtJs开发人员，也是React / Redux开发人员，但还没有尝试过。

我认为您的示例来自this article

您发布了选项2示例，在该示例中，他们正在写入数据，该数据未存储在redux中，仅存储在ExtJs网格的过滤条件中。数据是在ExtJs Store中的React / Redux中处理的，您需要使用their API进行数据（重新）加载。

具有Redux状态和本地存储的Extreact列表

1 个答案: