Extreact List with redux state and local store

Question

I'm using Redux for state management in this extreact powered app that I started and I'm at a component (List) that needs data from the redux store. The List component needs a store parameter that I know how to create but I don't know how to couple it with the redux store.

I found an example from Sencha blog but it's lacking exactly at the part that I'm interested in:

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);

How does the Ext.data.Store gets the items and how are those items updated on componentDidUpdate for example?

score 0 · Answer 1 · answered Oct 11 '19 at 09:56

DISCLAIMER: I am an ExtJs developer and also a React/Redux developer, but did not try it together yet.

I think your example comes from this article

You post the Option 2 example, where they are writing that data are not stored in redux, only the filtering criteria for the ExtJs Grid. The data are handled out of React/Redux within ExtJs Store, you need to use their API for data (re)loading.

Extreact List with redux state and local store

1 Answers1