В редуксе, как я должен обновить информацию, расположенную за пределами подобъекта, видимого для подредуктора?

Question

Приложение извлекает слайды по HTTP, а затем отображает их.

Форма состояния для этого приложения:

{
    errorMessage: '',
    slides: {
        isFetching: false,
        currentIndex: 0, 
        slides: []
    }
}

Я создаю субредуктор (это правильно термин?) для свойства слайдов верхнего уровня:

const initialState = {
    isFetching: false,
    currentIndex: 0, 
    slides: []
}

export function slidesReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_SLIDES_REQUEST:
            return ({ ...state, isFetching: true })
        case FETCH_SLIDES_SUCCESS:
            return ({ ...state, isFetching: false, slides: action.slides })
        case FETCH_SLIDES_ERROR:
            return ({ ...state, isFetching: false }) // I want to update the error message
    }
}

Я хочу обновить свойство errorMessage в root магазина, когда происходит FETCH_SLIDES_ERROR, но свойство errorMessage в root хранилища не находится внутри подобъекта хранилища, видимого этим подредуктором.

Как мне это сделать?

Я просто слушаю FETCH_SLIDES_ERROR на редукторе, охватывающем root магазина?

Answer 1

в редуксе, мы создаем root редуктор, который объединяет все редукторы с методом, называемым combReducer, поэтому я предлагаю вам сделать два файла: один для редуктора root и второй для редуктора выборки слайдов, который называется slidesReducer или любым другим именем. тебе бы хотелось. в slidesReducer поместите сообщение об ошибке так:

 const initialState = {
    isFetching: false,
    currentIndex: 0,
    errorMessage: "",
    slides: []
}

export function slidesReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_SLIDES_REQUEST:
            return ({ ...state, isFetching: true })
        case FETCH_SLIDES_SUCCESS:
            return ({ ...state, isFetching: false, slides: action.slides })
        case FETCH_SLIDES_ERROR:
            return ({ ...state, isFetching: false, errorMessgae: action.errorMessage })
    }
}