Атрибуты состояния обновления компонента React-redux после асинхронных вызовов саги от редуктора

Question

Я пытаюсь разработать простой компонент со списком изображений со стеком реагирования с избыточностью.Это мои действия, редукторы, определения саги и корень компонента -

// Actions 

export const getImageListData = () => ({
    type: IMAGE_LIST_GET_DATA
});

export const getImageListDataSuccess = (data) => {
    console.log("ACTION::SUCCESS", data);
    return ({
        type: IMAGE_LIST_GET_DATA_SUCCESS,
        payload: data
    });
};

// Reducers

export default (state = INIT_STATE, action) => {
    console.log("REDUCER::", state, action);
    switch (action.type) {

        case IMAGE_LIST_GET_DATA: return { ...state, isLoading: true };
        case IMAGE_LIST_GET_DATA_SUCCESS: return { ...state, items: action.payload.data, isLoading: false };

        default: return { ...state };
    }
}

// Sagas

import imagesData from "Data/images.json";

function* loadImages() {
    try {
        const response = yield call(loadImagesAsync);
        console.log("SAGA:: ", response);
        yield put(getImageListDataSuccess(response));
    } catch (error) {
        console.log(error);
    }
}

const loadImagesAsync = async () => {
        const contacts = imagesData;
        return await new Promise((success, fail) => {
            setTimeout(() => {
                success(contacts);
            }, 2000);
        }).then(response => response).catch(error => error);

};

export function* watchGetImages() {
    console.log("ACTION::INIT", IMAGE_LIST_GET_DATA);
    yield takeEvery(IMAGE_LIST_GET_DATA, loadImages);
}

export default function* rootSaga() {
    yield all([
        fork(watchGetImages)
    ]);
}

Теперь в вызываемом компоненте - действие getImageListData

и с этим mapStateToProps и провайдером соединения -

const mapStateToProps = ({ ImageList }) => {
    const {items} = ImageList;
    return {items};
};

export default connect(
    mapStateToProps,
    {
        getImageListData
    }
)(ImageListLayout);

Я сопоставляю ответ списка изображений с компонентами реквизита.Мое определение компонента следующее:

class ImageListLayout extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayMode: "imagelist",
            pageSizes: [8, 12, 24],
            selectedPageSize: 8,
            categories:  [
                {label:'Cakes',value:'Cakes',key:0},
                {label:'Cupcakes',value:'Cupcakes',key:1},
                {label:'Desserts',value:'Desserts',key:2},
            ],
            orderOptions:[
                {column: "title",label: "Product Name"},
                {column: "category",label: "Category"},
                {column: "status",label: "Status"}
            ],
            selectedOrderOption:  {column: "title",label: "Product Name"},
            dropdownSplitOpen: false,
            modalOpen: false,
            currentPage: 1,
            items: [],
            totalItemCount: 0,
            totalPage: 1,
            search: "",
            selectedItems: [],
            lastChecked: null,
            displayOptionsIsOpen: false,
            isLoading:false
        };
    }
    componentDidMount() {
        this.dataListRender();
    }

    dataListRender() {
        this.props.getImageListData();
    }

    render() {
        ...
    }
}

Теперь в моем компоненте я могу правильно получить доступ к this.props.items, полученному из редуктора с помощью действия IMAGE_LIST_GET_DATA_SUCCESS, но я также хочу обновить некоторые переменные состояния, такие какisLoading, currentPage, totalItemCount, totalPage и, поскольку они принадлежат самому компоненту, а не его родителям, я не хочу отображать их в подпорки, но хочу обновить состояние компонента и запустить повторную визуализацию.

Может кто-нибудь сказать мне, что я должен делать, чтобы это исправить, или я что-то здесь упускаю?

Answer 1

В вашей текущей настройке я не вижу причин для вас isLoading и т. Д. В состоянии. Вы должны просто сопоставить его с реквизитом:

const mapStateToProps = ({ ImageList, isLoading }) => {
    const {items} = ImageList;
    return {items, isLoading};
};

Я не понимаю, почему вы говорите "и так как они принадлежат самому компоненту, а не их родителям, я не хочу отображать их в подпорки, но хочу обновить состояние компонента и запустить повторную визуализацию. " при чем тут родители?