Ag-Grid асинхронная выборка данных с редуксом - PullRequest
Новая
       36

Ag-Grid асинхронная выборка данных с редуксом

0 голосов
/ 16 апреля 2019

Я настраиваю Ag-Grid React с Redux и мне нужно получить мои rowData асинхронно.

Для этого я использую redux-saga и правильно извлекаю данные и правильно возвращаю их в подпорки компонента, содержащего сетку. Однако, поскольку данные асинхронны, сетка уже отрисована, и рендеринг ее с rowData не приводит к тому, что строки включают данные.

Компонент 

import { fetchDataRequest } from '../actions/index';

class GridComponent extends Component {
    componentDidMount() {
        this.props.dispatch(fetchDataRequest());
    }

    render() {
        return (
            <div>
                <AgGridReact
                    rowData={this.props.data.items}
                    columnDefs={...}
                    defaultColDef={...}
                />
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { data } = state;
    const { isFetching, items } = data ? 
        { isFetching: false, items: data.items } :
        { isFetching: true, items: []};

    return {
        isFetching,
        items,
    }
}

const ConnectedGridComponent = connect(mapStateToProps)(GridComponent);

export default ConnectedGridComponent;

Индекс контейнера 

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import GridComponent from '../components/GridComponent'
import configureStore from '../store/configureStore';
import rootSaga from '../sagas/sagas';

const store = configureStore();
store.runSaga(rootSaga);

ReactDOM.render(
    <Provider store={store}>
        <GridComponent />
    </Provider>,
    document.getElementById('gridcomponent')
);

1011 * Переходник * 

import { combineReducers } from 'redux':
import { FetchDataActions } from '../actions/index';

const data = (state = {
    isFetching: false,
    items: []
}, action) => {
    switch (action.type) {
        case FetchDataActions.FETCH_DATA_REQUEST:
            return {
                ...state,
                isFetching: true
            };
        case FetchDataActions.FETCH_DATA_SUCCESS:
            return {
                ...state,
                isFetching: false,
                items: action.data.list,
                lastUpdated: action.lastUpdated
            };
        default:
            return state
    }
};

const rootReducer = combineReducers( {
    data
});

export default rootReducer

ConfigureStore 

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers/index';

export default function configureStore() {
    const sagaMiddleware = createSagaMiddleware();
    return {
        ...createStore(rootReducer, applyMiddleware(sagaMiddleware)),
        runSaga: sagaMiddleware.run,
    }
}

Сага 

import { call, put, fork } from 'redux-saga/effects';
import * as actions from '../actions/index';

export function fetchDataApi() {
    return fetch('/path/to/api')
        .then(response => response.json())
        .then(json => json);
}

export function* fetchData() {
    yield put(actions.fetchDataRequest());
    const data = yield call(fetchDataApi);
    yield put(actions.fetchDataSuccess(data));
}

export function* startup() {
    yield fork(fetchData);
}

export default function* root() {
    yield fork(startup);
}

Действия 


export const FetchDataActions = {
    FETCH_DATA_REQUEST: 'FETCH_DATA_REQUEST',
    FETCH_DATA_FAILURE: 'FETCH_DATA_FAILURE',
};

export function fetchDataRequest() {
    return {
        type: FetchDataActions.FETCH_DATA_REQUEST
    }
}

export function fetchDataSuccess(data) {
    return {
        type: FetchDataActions.FETCH_DATA_SUCCESS,
        data: data,
        lastUpdated: Date.now(),
    }
}

В прошлом мы использовали метод setRowData (rowData) сеточного API после завершения асинхронного вызова для добавления данных. Похоже, что в этом случае это не работает, потому что приставка не сообщает компоненту, когда извлечение завершено, и я не уверен, как передать сеточный API в саги.

...